JavaScript遍歷類元素並選擇除clicked元素之外的所有元素

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()在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";
        }
    }
}

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實現什么，以便你可以看到效果：

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

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

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