JavaScript遍历类元素，然后选择除单击的元素以外的所有元素

Question

假设我有5个div元素。它们都具有类似的onclick函数，将“删除”除被单击的div之外的其他div。

HTML：

<div id="1" class="divs" onclick="hide()"></div>
<div id="2" class="divs" onclick="hide()"></div>
<div id="3" class="divs" onclick="hide()"></div>
<div id="4" class="divs" onclick="hide()"></div>
<div id="5" class="divs" onclick="hide()"></div>

所以这就是我尝试的：

JavaScript：

function hide(){
    var divs = document.getElementsByClassName("divs");
    for(var i = 0; i < arrows.length; i++){
        if(this != arrows[i]){
            arrows[i].style.display = "none";
        }
    }
}

这一切都是删除每个div，但clicked元素应保留。我知道jQuery中有一个“：not（）”选择器，但我想使用JS做到这一点。有什么建议么？

谢谢

Answer 1

切勿使用事件处理程序内容属性。使用事件监听器，它就会起作用。

var divs = document.getElementsByClassName("divs");
function hide() {
  for(var i = 0; i < divs.length; i++){
    if(this != divs[i]){
      divs[i].style.display = "none";
    }
  }
}
[].forEach.call(divs, function(div) {
  div.addEventListener('click', hide);
});

<div id="1" class="divs">1</div>
<div id="2" class="divs">2</div>
<div id="3" class="divs">3</div>
<div id="4" class="divs">4</div>
<div id="5" class="divs">5</div>

Answer 2

this只需在hide()html 中传递hide(this)，然后将其捕获为 javascript 函数中的参数。这会将当前单击的 DOM 对象传递给hide函数，然后您可以使用它来显示特定的 div。

HTML：

<div id="1" class="divs" onclick="hide(this)"></div>
<div id="2" class="divs" onclick="hide(this)"></div>
<div id="3" class="divs" onclick="hide(this)"></div>
<div id="4" class="divs" onclick="hide(this)"></div>
<div id="5" class="divs" onclick="hide(this)"></div>

JavaScript：

function hide(obj){
    var arrows = document.getElementsByClassName("divs");
    for(var i = 0; i < arrows.length; i++){
        if(obj != arrows[i]){
            arrows[i].style.display = "none";
        }
    }
}