如何在javascript中定位点击事件

Question

如何定位click事件以便我可以在不影响其他div容器的情况下重用不同div中的.js-box？

var box = document.querySelector('.js-box'),
    colors = ['green', 'blue', 'red'];

box.onclick = function() {
    color = colors.shift();
    colors.push(color);

    box.className = 'js-box' + ' ' + color;
};

我非常确定我的解决方案是正确使用＆＃39;这个＆＃39;但我似乎能够理解它

http://jsfiddle.net/Grundizer/ky1tb3r5/

Answer 1

document.querySelector只选择第一个元素，而不是全部！

这就是你需要document.getElementsByClassName

的原因

＆＃13;

＆＃13;

var boxes = document.getElementsByClassName('js-box'),
    colors = ['green', 'blue', 'red'];



for (var i = 0; i < boxes.length; i++)
{
    boxes[i].onclick = function() {
        color = colors.shift();
        colors.push(color);
        
        this.className = 'js-box' + ' ' + color;
    };
}

＆＃13;

.js-box {
    width:200px;
    height:200px;
    margin:50px;
    border:thin grey solid;
    display:block;
}
.red {
    background-color:red;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}

＆＃13;

<div class="js-box"></div>
<div class="js-box"></div>

＆＃13;

＆＃13;

＆＃13;