javascript - 按钮数组的当前索引

Question

如何仅返回被单击按钮的索引？

这是让我担心的代码:

window.onload = function(){

var    description = document.getElementsByClassName('description'),
        buttons = document.getElementsByClassName('button');

var currD = 0; // this var stands for the current description that should be shown

var show = function(){

    for( var i = 0; i < description.length; i++ ){

        if( i !== currD ){
            description[i].style.display='none';
        }

        else if( i === currD ){
            description[i].style.display='block';   
        }

    }

};

  for (var i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', function(){
        currD = i;
        console.log(i);
    });
}

    window.setInterval(show,300);
};

每次单击按钮时，for 循环都会返回最后一个元素。

由于我在这个页面上没有太多按钮，所以我采用了不熟练的旧方法:

window.onload = function(){

var description = document.getElementsByClassName('description'),
    buttons = document.getElementsByClassName('button');

    var currD = 0; // this var stands for the current description that should be shown

    var show = function(){

        for( var i = 0; i < description.length; i++ ){

            if( i !== currD ){
                description[i].style.display='none';
            }

            else if( i === currD ){
                description[i].style.display='block';   
            }

        }

    };

buttons[0].addEventListener('click', function(){
    currD = 0;
});

buttons[1].addEventListener('click', function(){
    currD = 1;
});

buttons[2].addEventListener('click', function(){
    currD = 2;
});

        window.setInterval(show,300);
    };

这可行，但如果我想添加更多按钮，设置所有事件监听器会浪费时间。

Answer 1

这是一个常见的关闭问题。这应该有效:

for (var i = 0; i < buttons.length; i++){

    (function (_i) {
        buttons[_i].addEventListener('click', function(){
          currD = _i;
          console.log(_i);
        });
    })(i);

}

另一个解决方案:

for (var i = 0; i < buttons.length; i++){

    buttons[i].addEventListener('click', function(){
        return function() {
            currD = i;
            console.log(i);
        }
    });
}

您甚至可以在这里阅读有关关闭的更多信息:http://www.w3schools.com/js/js_function_closures.asp但还有很多其他有趣的文章。只是谷歌JavaScript关闭

对于您的具体示例，甚至可能像这样的东西也可以工作:

for (var i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', function(e){
        currD = buttons.indexOf( e.currentTarget );
        console.log(currD);
    });
}