我正在尝试让我的javascript在点击时为每条评论弹出一条消息。
我有3个评论框,每个评论框下面都有1个“弹出”按钮,当点击“弹出窗口”时,它会提醒一条消息(“Ouyeah!”)
只需单击顶部的第一个“弹出窗口”链接即可发出消息“Ouyeah!”,并且该消息会被警告3次。点击其他2个“弹出窗口”链接无法执行操作。
代码:
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='javascript:;' id="reply_open">popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='javascript:;' id="reply_open">popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='javascript:;' id="reply_open">popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
JS:
<script type="text/javascript">
$("#reply_open").parent().parent().parent().parent().children(".media-body").children("p").children("span").children("#reply_open").click(function(){
alert ("Ouyeah!");
</script>
只需单击顶部的第一个“弹出窗口”链接即可发出消息“Ouyeah!”,并且该消息会被警告3次。点击其他2个“弹出窗口”链接无法执行操作。
如何解决这个问题?非常感谢,
答案 0 :(得分:2)
您不能拥有重复的ID。
使用id="reply_open"
三次(不止一次!)是错误的,并使您的HTML无效。
JSFIDDLE DEMO - &gt; http://jsfiddle.net/LC9gg/4/
这可能就是你想要的。将ID作为类和&amp;写下面的代码。
$(".reply_open").click(function () {
alert("Ouyeah!");
});
答案 1 :(得分:0)
首先,您的HTML在某些方面不正确:
id's
必须是唯一的.media
div标签。请改为尝试:
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
我完全删除了id
,他们没有必要。 .media
div已正确关闭,JavaScript已从hrefs中删除。
然后,不要像使用链式.parent()
调用一样搜索DOM,请尝试以下js:
<script>
$('.media .media-body a').click(function(){
alert("Ouyeah!");
});
</script>
这会为每个a
添加一个事件处理程序,它应该提醒所需的文本。
<强> Working example 强>