[英]jQuery multiple ShowHide Issue
我有一个显示/隐藏脚本供我们论坛的用户签名使用,
代码如下:
<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上尝试了该代码,并将代码加倍(键入两次),所有签名同时出现/消失!
您正在指示显示/隐藏所有签名。 要显示或隐藏特定对象,您可以执行以下操作:
<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。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.