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

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？ 感谢您的回复！

- Syno

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>

- Mosh Feu

---

我给你提供了另一种方法来完成这个。看一下。 - Mosh Feu

Answer 2

你可以隐藏点击的 div 元素的兄弟元素，使用 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>

- Nenad Vracar

---

谢谢！Mosh Feu提供了更多的内容 :) - Syno

Answer 3

You can use not to avoid element and this will indicate current instance.

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

- Bharat

---

请给出下投票者添加评论原因，因为我的答案符合PO的要求。 - Bharat

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

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

- Rajaprabhu Aravindasamy

---

你可以在点击回调函数中使用 $('.clickable').not(this).hide()。 - Panama Prophet

@PanamaProphet 当我使用.siblings()时，我错过了什么简便之处？ - Rajaprabhu Aravindasamy

Answer 5

在这个例子中，您不需要添加任何其他选择器来定位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>

- gavgrif

Answer 6

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

- Soni Vimalkumar

Answer 7

将每个元素分配一个类：

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

1. 在此函数中从“this”元素中删除类“sth”
2. 隐藏所有具有类“sth”的元素 $('.sth').hide();

- malutki5200