javascript - Vanilla JS 不是这个点击事件

Question

我想将点击时不是“this”的 h1 元素的颜色设置为黑色。所以它会在点击时将 h1 变为红色，而不是将其变为黑色。

<script>
window.addEventListener('load', function() {
    var h1Loop = document.querySelectorAll("h1");

    for(var i = 0; i < h1Loop.length; i++) {
        h1Loop[i].addEventListener("click", function () {
            this.style.color = "red";
            not this.style.color = "black"
        });
    }
});
</script>

<h1>Test</h1>
<h1>Testing</h1>
<h1>Test One</h1>

Answer 1

您可以像这样修改事件监听器。

window.addEventListener('load', function() {

var h1Loop = document.querySelectorAll("h1");

for(var i = 0; i < h1Loop.length; i++) {
    h1Loop[i].addEventListener("click", function () {
        for(var j = 0; j < h1Loop.length; j++) {// all header elements are changed to black
              h1Loop[i].style.color = "black"
        }
        this.style.color = "red";//clicked header element is changed to red
    });
}

});

当点击一个特定的标题元素时，首先所有标题元素的颜色都变为黑色。然后单击元素的颜色更改为红色。这样，被点击的元素单独显示为红色。希望这会有所帮助。