如果一个项目被点击，删除其他项目？

Question

我正在学习Javascript和jQuery，而我被困在这个问题中。假设我的代码如下所示：

<div id="hey"> hey </div> 
<div id="how"> how </div> 
<div id="are"> are </div> 
<div id="you"> you </div> 

现在，如果我点击其中一个div，我希望其他的消失。 我知道，我可以用on.click hey和display none与how,are和you为它们中的每一个创建4个函数。但有没有更简单的方法？我敢打赌，有可能是classes？

感谢您的回复！

Answer 1

使用siblings来参考其“兄弟”。

_{如果提供的jQuery代表了一组DOM元素，（）方法允许我们通过在DOM树中这些元素的兄弟姐妹搜索并从匹配元件构造一个新的jQuery对象的.siblings。}

$('div').click(function(){ 
 
    $(this).siblings().hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

或者你可以隐藏所有不点击的元素使用not

_{取下匹配的元素集合的元素其他div。}

$('div').click(function() { 
 
    $('div').not(this).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

Answer 2

你可以只隐藏点击股利siblings()。

$('div').click(function() { 
 
    $(this).siblings().fadeOut() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey">hey</div> 
 
<div id="how">how</div> 
 
<div id="are">are</div> 
 
<div id="you">you</div>

Answer 3

您可以使用not避免元素和this会显示当前实例。

$(document).ready(function(){ 
 
    $("div").on("click",function(){ 
 
    $("div").not(this).hide("slow"); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

Answer 4

分配一个类的每个元素：

<div id="hey" class='sth'> hey </div> 
<div id="how" class='sth'> how </div> 
<div id="are" class='sth'> are </div> 
<div id="you"class='sth' > you </div> 

和的onclick写信js函数。在此功能从“本”元素

1. 删除类“某事”
2. 隐藏所有类“某事” $('.sth').hide();

Answer 5

呀有一些更简单的方法，我可以告诉一个元素一个从它，

设置公共类的所有，你是要去的目标要素，

<div class="clickable" id="hey"> hey </div> 
<div class="clickable" id="how"> how </div> 
<div class="clickable" id="are"> are </div> 
<div class="clickable" id="you"> you </div> 

而且你必须使用一个类选择到一个单一的点击事件绑定，

$(".clickable").on("click", function(){ }); 

现在使用.siblings()功能隐藏需要的元素，

$(".clickable").on("click", function(){ 
    $(this).siblings(".clickable").hide(); 
}); 

但是使用肘，而不是hide会听起来合乎逻辑，

$(".clickable").on("click", function(){ 
    $(this).siblings(".clickable").toggle(); 
}); 

由于您可以对所有元素执行相同的操作。

Answer 6

对于这个例子 - 你不需要添加任何进一步的选择器来定位div的，尽管在现实中 - 这个解决方案将导致页面上的所有div受到影响 - 添加类将是我的实际建议： - 但是这个适用于这个例子。点击一个div，所有的div都隐藏，然后点击一个div。我还添加了一个重置​​按钮以允许所有div重新出现。

$('div').click(function(){ 
 
    $('div').hide(); 
 
    $(this).show(); 
 
}); 
 

 
    $('#reset').click(function(){ 
 
    $('div').show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div> 
 
<hr/> 
 
<button type="button" id="reset">Reset</button>

Answer 7

$(document).ready(function(){ 
 
    $("div").on("click",function(){ 
 
    $("div").not(this).toggle("slow"); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>