如何用JS获取当前标签的索引值

有时候,我们需要点击标签的时候,知道当前的索引值。这样好利用索引值去获取另一个标签,进行样式更改。

最典型的运用就是图片轮播。比如这种:

如何用JS获取当前标签的索引值_第1张图片

点击对应点,就要显示对应的图片和文字内容。 如何把点 跟 图片及文字 对应起来呢? 靠的就是索引。

有如下结构:

  • 你好1
  • 你好2
  • 你好3
  • 你好4
  • 你好5

我想点击任意 li,就输出它的索引值。

方法有几个:

方法一:最简单的就是 jQuery方式了。

$("#myul>li").on("click",function(){
    var  $this = $(this);   //  习惯性保存下当前标签
    var index = $this.index();
    console.info( index );
});

方法二:原生态JS。写标签的时候,给 li 添加自定义属性 index 。点击 li 的是时候,就获取 当前标签 的 自定义属性 index。

改造 HTML 结构如下:(索引不出意外的话,都是 0 开始的。)

  • 你好1
  • 你好2
  • 你好3
  • 你好4
  • 你好5
  var myul = document.getElementById("myul");
    var  li = myul.children;
    for( var i = 0 ; i<= li.length-1 ; i++){
        li[i].onclick = function(){
            var _this = this;
            var  index = _this.getAttribute("index");
            console.info( index);
        }
    }

方法三:原生态JS。方法二尽管可以完成要求,但是如果标签数量经常变动,也不是个好事情,还要改自定义属性。所以,还是用原来的结构:

  • 你好1
  • 你好2
  • 你好3
  • 你好4
  • 你好5
 var myul = document.getElementById("myul");
    var  li = myul.children;  
    for( var i = 0 ; i<= li.length-1 ; i++){
        li[i].index = i ;  // 添加属性
        li[i].onclick = function(){
            var _this = this;  
            console.info( _this.index);  // 输出自定义属性
        }
    }

   li[i].index = i ;    这句代码,其实还是在给 li 标签添加 属性 index。 标签属性也可以这样加? 当然~!因为标签本质就是一个对象,是一个对象,当然可以添加属性了。不过这属性是JS 赋予它的,没有直接写在标签上,所以不能使用 getAttribute() 获取它的值。

方法四:原生态JS,利用闭包。

 var myul = document.getElementById("myul");
 var  li = myul.children;

for( var i = 0 ; i<= li.length-1 ; i++){
        li[i].onclick=(function(n){
                 console.info(n);   // 这个代码会直接执行哦。它在闭包里。
                return function(){
                    console.info( n );
                }
        })(i);
 }

原理:li 创建事件函数的时候,其实执行了一个闭包。这个闭包把 对应的 i 作为参数传进来,并赋值给 闭包的内部函数。内部函数会保持这个 i 值不变。这样,点击任意一个 i ,就会得到对应的索引 i。

方法五:原生态JS,还是利用闭包。

var myul = document.getElementById("myul");
var  li = myul.children;
for( var i = 0 ; i<= li.length-1 ; i++){
        (function(n){
            li[n].onclick=function(){
                console.info(n);
            }
        })(i);
    }

每次执行循环,执行闭包,闭包可以保留当前 i 的值到 内部中。

方法四,与方法五,都是避免了直接在for循环里输出 i 的值(怎么输出都是 4),而是借用了闭包保留当前 i  的值。

方法六:还是ES6爽快,用 let 定义 循环变量 i 就ok了。鉴于此,大家还是及早掌握 ES6 吧。

let  myul = document.getElementById("myul");
let  li = myul.children;
for( let i = 0 ; i<= li.length-1 ; i++){
        li[i].onclick = function(){
            console.info( i );
         }
}

原因,let 定义 i, 会把每次循环都成一个封闭空间。 i 值 就不会传递到空间外了(虽然它也可以自增)。具体可以了解下ES6 对for 的解释。

你可能感兴趣的:(javascript,javascript,标签索引)