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

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

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>

jQuery多个ShowHide问题

2 个答案: