javascript - js 样式不起作用

Question

我想用 features__box 类为 block 的背景着色，但 JS 不起作用/Chrome 无法识别任何错误。

这是 HTML

<div class="features__active features__box">
            <h3>Visual Composer</h3>
            <p>TheFox comes with the Visual Composer Plugin. You won’t need to code or to remember any shortcodes with our. </p>
        </div>
        <div class="features__box">
            <h3>Responsive</h3>
            <p>TheFox comes with the Visual Composer Plugin. You won’t need to code or to remember any shortcodes with our. </p>
        </div>
        <div class="features__box">
            <h3>Retina Ready</h3>
            <p>TheFox comes with the Visual Composer Plugin. You won’t need to code or to remember any shortcodes with our. </p>
        </div>

这是 JS:

var feature_i = document.querySelectorAll('.features__box');

feature_i.addEventListener('click', function(){

    for( var i = 0; i < fearture_i.length; i++) {
        feature_i[i].style.backgroundColor = "red";
    }

});

默认情况下，每个元素的背景都是白色的。我想让它切换。请帮忙!

Answer 1

事件监听器需要在您的循环内并附加到每个对象元素。

var feature_i = document.querySelectorAll('.features__box');

for (var i = 0; i < feature_i.length; i++) {
    feature_i[i].addEventListener('click', function() {
        this.style.backgroundColor = "red"; // where "this" refers to feature_i[i]
  });
}