仅显示一个具有相同类的隐藏div

Question

我有4个隐藏的div与同一个类.info，我希望当我点击.show-info链接时，只会出现感兴趣的div而不是所有的.info div。

这里是代码：

<a href="" class="show-info">Show info</a>
<div id="info">
 Info will be here...
 <a href="">close</a>
</div>

...

<a href="" class="show-info">Show info</a>
<div id="info">
 Info will be here...
 <a href="">close</a>
</div>

...

<a href="" class="show-info">Show info</a>
<div id="info">
 Info will be here...
 <a href="">close</a>
</div>

...

<a href="" class="show-info">Show info</a>
<div id="info">
 Info will be here...
 <a href="">close</a>
</div>

Answer 1

尝试，

$('a.show-info').click(function(e){
 e.preventDefault();
 $(this).next('div.info').toggle();
});

但请注意，我已将info视为class，因为我们无法重复ID。

完整代码，

 $('a.show-info').one('click', func);

 function func(e) {
     e.preventDefault();
     $(this).next('div.info').show();
 }

 $('div.info a:contains(close)').click(function (e) {
     e.preventDefault();
     $(this).parent().hide()
         .prev().one('click', func);
 });

DEMO

Answer 2

首先，您必须在div之后结束锚标记，然后使用此代码..

$('a.show-info').click(function(e){
 $(this).next('#info').show();
 });

Answer 3

$('.show-info').click(function(e){
    e.preventDefault();
    $(this).next('.info').show();
});

请注意，ID必须是唯一的，因此请尝试使用class而不是id

Answer 4

ID 应为unique。所以将html id =“info”更改为class="info"

 $(".info").hide();
$('a.show-info').click(function(e){
 e.preventDefault();
   $(".info").hide();
 $(this).next('div.info').show();
})

DEMO

关闭

$('a:not(.show-info):contains(close)').click(function(e){
 e.preventDefault();
   $(".info").hide();
});

DEMO Close