JQuery множественного ПоказатьСкрыть Выпуск

Question

У меня есть показать/скрыть скрипт для подписи пользователей нашего форума,

код выглядит следующим образом:

<fieldset> 
<legend align="right"><a href="member.php?$session[sessionurl]u=$post[userid]">Signature of $post[musername] </a></legend> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("a").click(function(){ 
     $("signature").toggle(600); 
     (this).parent().prev('.toggle').toggle('slow'); 
    }); 
}); 
</script> 
<div class="spoiler" align="center"> 
<font size="2" face="Tahoma"> <a style="cursor:pointer">Press here to see $post[musername]'s signature</a> 
</if></font></div></div><br> 
<signature style="display: none;" align="center">$post[signature]</signature> 
</fieldset> 

код работает хорошо, но когда один нажмите скрыть/показать текст, все подписи появляются, что раздражает. Есть идеи?

Я пробовал код на http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle и удвоил код (набрал его дважды), Все подписи появляются и исчезают одновременно!

Answer 1

Вы инструктируете показывать/скрывать все подписи. Чтобы показать или скрыть определенную, который вы можете сделать:

<a data-id="link1" style="cursor:pointer">Press here to see $post[musername]'s signature</a> 
    <signature id="link1" style="display: none;" align="center">$post[signature]</signature> 

    <a data-id="link2" style="cursor:pointer">Press here to see $post[musername]'s signature</a> 
    <signature id="link2" style="display: none;" align="center">$post[signature]</signature> 

, а затем

$(document).ready(function(){ 
    $("a").click(function() { 
     var signatureId=this.getAttribute ("data-id"); 
     $("#"+signatureId).toggle(600); 
     . 
     . 
    }); 
}); 

Хитрость заключается в том, чтобы назначить другой идентификатор каждой подписи, и рассказать <a>, что идентификатор это.

Answer 2

<fieldset> 
<legend align="right"><a href="member.php?$session[sessionurl]u=$post[userid]">Signature of $post[musername] </a></legend> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("a").click(function(){ 
     **$(this).parents('block').find("signature").toggle(600);** 
     $(this).parent().prev('.toggle').toggle('slow'); 
    }); 
}); 
</script> 
**<div class="block">** 
<div class="spoiler" align="center"> 
<font size="2" face="Tahoma"> <a style="cursor:pointer">Press here to see $post[musername]'s signature</a> 
</if></font></div><br> 
<signature style="display: none;" align="center">$post[signature]</signature> 
**</div>** 
</fieldset> 

Please refer above code 
I added 3 new lines in code 
I added one parent div of <a> and signature class div 
then i accessed both using their parent div having class block 
and yes in your html </div> is 2 time, i reduced 1 </div>