jQuery单击关闭按钮时它只会隐藏特定的div？

问题描述：

I have this piece of markup. Remember all these are coming from the database. I have used foreach loop and in that I am getting those values

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

Now you can see there is a close button <a id="close" href="#" class="close">X</a>. I want that when someone will click on close button then it will only hide that div() In jquery when I used

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

it is only working for the first block and also it is hiding the total all blocks? So can someone tell me how to make that when someone will click on that close button and it will hide that particular block.Thanks

我有这个标记。请记住，所有这些都来自数据库。我使用了foreach循环，因为我得到了这些值 p>

 ＆lt; div id =“announcment-wrap”＆gt; 
＆lt; div class =“announcement-text  “＆gt; 
这又是一个虚拟的
＆lt; a href =”http://www.google.com“＆gt; |＆amp; nbsp;点击此处＆lt; / a＆gt; 
＆lt; a id =”关闭 “href =”＃“class =”close“＆gt; X＆lt; / a＆gt; 
＆lt; / div＆gt; 
＆lt; div class =”announcement-text“＆gt; 
这是演示3 
＆lt; a  href =“http://www.google.co.in”＆gt; |＆amp; nbsp; Demo3＆lt; / a＆gt; 
＆lt; a id =“close”href =“＃”class =“close”＆gt; X＆lt;  ; / a＆gt; 
＆lt; / div＆gt; 
＆lt; div class =“announcement-text”＆gt; 
这是演示4 
＆lt; a href =“http://facebook.com”＆gt; |  ＆amp; nbsp;再次演示＆lt; / a＆gt; 
＆lt; a id =“close”href =“＃”class =“close”＆gt; X＆lt; / a＆gt; 
＆lt; / div＆gt;  
＆lt; / div＆gt; 
  code>  pre> 
 
 现在你可以看到有一个关闭按钮＆lt; a id =“close”href =“＃”class =  “接近” ＆GT; X＆LT; / A＆GT; 代码>。 我希望当有人点击关闭按钮然后它只会隐藏div（）
在我使用时的jquery  p> 
 
 
  jQuery（document）.ready（function（$）  {
 jQuery（'#close'）。click（function（）{
 jQuery（'。announcement-text'）。hide（）; 
}）; 
}）; 
  code>  
 
 它只适用于第一个块，它是否隐藏了所有块的总数？ 所以当有人点击该关闭按钮并且它将隐藏该特定块时，有人可以告诉我如何做到这一点。谢谢 p> 
  div>

答

Try:

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

答

Id's should be unique so use class instead,and try using .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();
  });
});

答

ID should be unique so use selector as .close not #lose

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

Your each text is

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

USe

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

答

You need to use the class i.e .close to work for all close close button Or specify different id to all of them .

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

答

Since the close button is inside the div, u can make use of the .parent() function to select the div.

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

all the best!! hope this helps.

答

First of all, you cannot have the same ID for all the Close buttons, Remove duplicate ID. This won;t work in IE7 <

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

jQuery单击关闭按钮时它只会隐藏特定的div？

相关推荐