如何在javascript中定位点击事件

Question

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

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

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

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

我很确定我的解决方案是正确使用'this'，但我似乎能够理解它

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

Answer 1

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

这就是为什么你需要document.getElementsByClassName

 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; }; } 

 .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; } 

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