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来引用其“兄弟”。

_{给定一个表示一组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>

或者您可以使用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

您可以隐藏点击的div的siblings()。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用not来避免元素，this将指示当前实例。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

是的，有一些更简单的方法，我可以告诉它一个，

为您要定位的所有元素设置一个公共类，

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

但是使用切换而不是隐藏听起来合乎逻辑，

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

因为你可以对所有元素进行相同的操作。

Answer 5

为每个元素分配一个类：

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

编写一个js函数onclick。

从此函数中的'this'元素中删除类'sth'
使用'sth'$('.sth').hide();

Answer 6

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

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

{{1}}

Answer 7

＆＃13;

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

＆＃13;

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

＆＃13;

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

7 个答案: