点击一个ul的五个li元素，分别弹出他们的序号

我不是女神ヾ 2023-08-17 15:29 109阅读 0赞

**1.使用let(用let声明的变量，只在其所在的代码块内有效)**

<ul>
        <li>000</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        var oli = document.querySelectorAll('li');
        console.log(oli);
    
        for (let i = 0; i < oli.length; i++) {
           oli[i].onclick=function(){
               console.log(i);
           }
        }
        </script>

**2.利用闭包**

<ul>
        <li>000</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        var oli = document.querySelectorAll('li');
        console.log(oli);
        for (var i = 0; i < oli.length; i++) {
            oli[i].onclick = (function (k) {
                return function(){
                    console.log(k)
                }
            })(i);
        }
        </script>

**3.为对象添加属性，属性的值即为自身的序号。**

<ul>
        <li>000</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        var oli = document.querySelectorAll('li');
        console.log(oli);
        for (var i = 0; i < oli.length; i++) {
            oli[i].a = i;
            oli[i].onclick = function () {
                console.log(this.a);
            }
        }
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3中ul,li{}； ul li{}； ul＞li{}有何区别

![a09384c31d2f3403435ddb8d7e617445.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

分手后的思念是犯贱/ 2024年03月29日 16:32/ 0 赞/ 113 阅读

相关点击一个ul的五个li元素，分别弹出他们的序号

1.使用let(用let声明的变量，只在其所在的代码块内有效) <ul> <li>000</li> <li>111</li>

我不是女神ヾ/ 2023年08月17日 15:29/ 0 赞/ 110 阅读

相关利用伪元素before给无序列表ul中的li添加有序序号

在建站过程中做侧边栏文章排行榜的时候，我们会为我们的网站文章进行一个排序，在这种情况下就会用到无序列表，那么少了序号排列网站看上去就不是那么美观。原来未接触CSS3的时候，

向右看齐/ 2022年11月28日 10:39/ 0 赞/ 197 阅读

相关页面当中，删除ul当中的一个li

<ul class="phone-bumber" id="ul_author"> <!--<li>张大军（13735898529）<

悠悠/ 2022年09月21日 13:24/ 0 赞/ 144 阅读

相关 MFC 点击按钮，弹出另一个对话框

方法一：模态对话框资源视图--Dialog--右键--添加资源--新建--对话框-,然后在已经生成的对话框中（解决资源视图中的dialog下的新生成的那个）右键--

我会带着你远行/ 2022年09月18日 12:58/ 0 赞/ 421 阅读

相关 html中ul li前面小黑点样式 ul li一些样式

对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。 1、在CSS中写

爱被打了一巴掌/ 2022年07月19日 05:11/ 0 赞/ 339 阅读

相关闭包-点击获得li元素的序号

利用闭包为每一个li加一个属于自己的序号 <!DOCTYPE html> <html> <head> <title>test</t

ゝ一世哀愁。/ 2022年05月25日 09:47/ 0 赞/ 179 阅读

相关 JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容

这是一个非常常见的面试题，出题方式多样，但考察点相同，下面我们来看看这几种方法：方法一： var itemli = document.getElementsB

爱被打了一巴掌/ 2022年04月18日 06:26/ 0 赞/ 277 阅读

相关点击出现的弹出层的参考

参考链接 https://www.jb51.net/article/71308.htm 判断不同的ios和安卓 https://blog.csdn.net/zfz5720

客官°小女子只卖身不卖艺/ 2021年12月01日 20:24/ 0 赞/ 328 阅读

相关 JS中创建10个a标签，点击弹出对应的序号

for (let i = 1; i <= 10; i++) { let a = document.createElement('a')

迷南。/ 2021年08月24日 14:30/ 0 赞/ 283 阅读