2014-11-22 92 views
0

我对我们论坛的用户签名显示/隐藏脚本,jQuery的多个显示隐藏问题

的代码是这样的:

<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 上的代码,并将代码加倍(键入了两次),所有签名同时出现/消失!

+0

代码是做什么的,你期望什么? – 2014-11-22 12:10:49

回答

0

您正在指示显示/隐藏所有签名。要显示或隐藏特定的一个,你可以这样做:

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

诀窍是不同的ID分配给每一个签名,并告诉<a>什么ID是它。

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