问题描述
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="Jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("#reply").click(function(){$("#af").fadeIn('slow')})})</script></head><body><div> <p> xxxxxxxxxxxxxxxxx </p> <span style="display:none;" id="af"> <form> <textarea style="width:300px;height:100px; margin:3px 0 0 20px; border:#C90 1px solid;"></textarea> </form> </span><span id="reply"><a href="#" >回复</a></span> </div><div> <p> xxxxxxxxxxxxxxxxx </p> <span style="display:none;" id="af"> <form> <textarea style="width:300px;height:100px; margin:3px 0 0 20px; border:#C90 1px solid;"></textarea> </form> </span><span id="reply"><a href="#" >回复</a></span> </div><div> <p> xxxxxxxxxxxxxxxxx </p> <span style="display:none;" id="af"> <form> <textarea style="width:300px;height:100px; margin:3px 0 0 20px; border:#C90 1px solid;"></textarea> </form> </span><span id="reply"><a href="#" >回复</a></span> </div></body></html>问题:点击第一个按钮有反应 下面的都没反应呢
解决方案
HTML中，id必须唯一标识一个元素。也就是说：不能有两个标签有相同的id。这个html是不正确的。这种情况，还是3个使用不同的id吧。三个分别挂载消息处理函数。<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function makeFadeFunction(expr) { return function() { $(expr).fadeIn('slow'); }}$(document).ready(function(){ for (var i = 0; i<3; i++) { // 由于JavaScript的Closure的工作方式，直接function() {...}是不可以的。 $("#reply"+i).click(makeFadeFunction("#af"+i)); }});</script></head><body><div> <p> xxxxxxxxxxxxxxxxx </p> <span style="display:none;" id="af0"> <form> <textarea style="width:300px;height:100px; margin:3px 0 0 20px; border:#C90 1px solid;"></textarea> </form> </span><span id="reply0"><a href="#" >回复</a></span> </div><div> <p> xxxxxxxxxxxxxxxxx </p> <span style="display:none;" id="af1"> <form> <textarea style="width:300px;height:100px; margin:3px 0 0 20px; border:#C90 1px solid;"></textarea> </form> </span><span id="reply1"><a href="#" >回复</a></span> </div><div> <p> xxxxxxxxxxxxxxxxx </p> <span style="display:none;" id="af2"> <form> <textarea style="width:300px;height:100px; margin:3px 0 0 20px; border:#C90 1px solid;"></textarea> </form> </span><span id="reply2"><a href="#" >回复</a></span> </div></body></html>