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，但点击的元素应该保留。我知道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()内传递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";
        }
    }
}

Answer 3

可以

完成

HTML

<div id="1" class="divs" onclick="hide(this)">q</div>
<div id="2" class="divs" onclick="hide(this)">w</div>
<div id="3" class="divs" onclick="hide(this)">e</div>
<div id="4" class="divs" onclick="hide(this)">r</div>
<div id="5" class="divs" onclick="hide(this)">7</div>

JS

<script>
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";
        }
    }
}
</script>

Answer 4

在这里快速演示了您想要通过一些CSS实现的目标，以便您可以看到效果：

＆＃13;

window.onload = () => {
 
  var divs = document.getElementsByClassName('divs');

  for(let div of divs) {
  	  div.onclick = (e) => {
     		for(let visibleDiv of divs) {
              if(visibleDiv != e.target) {
              	visibleDiv.style.display = "none";
              }
          }
      }
  }
  
}

＆＃13;

.container {
    display: flex;
    justify-content: space-between;
}

.divs {
    width: 50px;
    height: 50px;
    background-color: #e67e22
}

＆＃13;

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

＆＃13;

JavaScript遍历类元素并选择除点击元素

4 个答案: