如果单击一个项目,删除其他项目？

Question

我正在学习Javascript和jQuery,我遇到了这个问题.假设我的代码如下所示:

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

现在,如果我点击其中一个div,我希望其他的消失.我知道,我可以与他们中的每一个创建4种功能on.click hey,并display none有how,are和you.但有更简单的方法吗？我敢打赌,classes也许吧？

谢谢你的回复!

Answer 1

使用siblings获得参考其"兄弟".

_{给定一个表示一组DOM元素的jQuery对象,.siblings()方法允许我们在DOM树中搜索这些元素的兄弟,并从匹配元素构造一个新的jQuery对象.}

$('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>

或者您可以隐藏所有其他div不使用的点击元素not

_{从匹配元素集中删除元素.}

$('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>