jQuery在单击关闭按钮时仅会隐藏该特定的div吗？

Question

我有这个标记。 记住所有这些都来自数据库。 我已经使用了foreach循环，并且正在获取这些值

<div id="announcment-wrap">
    <div class="announcement-text">
    This is again a dummy 
    <a href="http://www.google.com">|&nbsp;click here</a>
    <a id="close" href="#" class="close">X</a>
  </div>
    <div class="announcement-text">
    This is demo 3 
    <a href="http://www.google.co.in">|&nbsp;Demo3</a>
    <a id="close" href="#" class="close">X</a>
  </div>
    <div class="announcement-text">
    This is demo 4 
    <a href="http://facebook.com">|&nbsp;Demo again</a>
    <a id="close" href="#" class="close">X</a>
  </div>    
</div>

现在您可以看到有一个关闭按钮<a id="close" href="#" class="close">X</a> 。 我希望当有人单击关闭按钮时，它只会在我使用jquery时将其隐藏在div（）中

jQuery(document).ready(function($) {
  jQuery('#close').click(function() {
    jQuery('.announcement-text').hide();
  });
});

它仅适用于第一个块，并且也隐藏了所有块的总数？ 所以有人可以告诉我如何做到这一点，当有人单击关闭按钮并隐藏该特定块时。

Answer 1

ID应该是唯一的，因此请使用选择器作为.close而不是#lose

试试http://jsfiddle.net/devmgs/ZGjaj/

您的每个文字是

<div class="announcement-text">
    This is again a dummy 
    <a href="http://www.google.com">|&nbsp;click here</a>
    <a id="close" href="#" class="close">X</a>
</div>

采用

$(document).ready(function($) {
  $('.close').click(function() { 
    $(this).closest('.announcement-text').hide();
  });
});

Answer 2

ID应该是唯一的，因此请改用类，然后尝试使用.closest()

<a href="http://www.google.co.in">|&nbsp;Demo3</a>
<a class="close" href="#" class="close">X</a>
-----^

jQuery(document).ready(function($) {
  jQuery('.close').click(function() {
    jQuery(this).closest('.announcement-text').hide();
  });
});

Answer 3

尝试：

jQuery(document).ready(function($) {
  jQuery('#close').click(function() {
    jQuery(this).parent('.announcement-text').hide();
  });
});

Answer 4

由于关闭按钮位于div内，因此您可以使用.parent（）函数选择div。

jQuery(document).ready(function($) {
   jQuery('#close').click(function() {
      jQuery(this).parent().hide();
   });
});

祝一切顺利！！ 希望这可以帮助。

Answer 5

您需要使用类 .close来处理所有关闭按钮，或者为所有按钮指定不同的ID 。

   jQuery(document).ready(function($)  {
      jQuery('.close').click(function(){
jQuery(this).closest('.announcement-text').hide();});});  

Answer 6

首先，对于所有“关闭”按钮，“删除重复的ID”，您不能具有相同的ID。 这将无法在IE7中工作<

$(document).ready(function($) {
  $('.close').click(function() {
    $(this).parent('.announcement-text').hide();
  });
});