javascript - 在点击时出现一个div,jquery
问题描述
我正在 ruby-sinatra 中构建一个应用程序,它允许您创建帖子然后回复帖子。我正在尝试在用户单击回复时显示回复帖子的表单。但是,目前我的代码仅适用于正在呈现的第一个消息 div。所有其他人都有使表单出现的按钮,但它们不起作用。
这是我的 .erb
<div class="message-link more ">
<div class="comment-square">
<% message.comments.each do |comment| %>
<% comment.users.each do |user| %>
<div><h5><%= user.username %></h5></div>
<% end %>
<script type="text/javascript">
$("#button").click(function() {
$("#fn").show();
$("#ln").show();
});
</script>
<p class="comment-text"><%= comment.text %>
<input id="button" type="button" value="Reply"><br>
</p>
<div id="fn" hidden><input type="text" /></div><br>
<% end %>
</div>
</div>
谁能发现为什么?
解决方案
您在呈现按钮之前引用它,因此它不会找到它。下一个问题是您将代码放在一个循环中,因此您将生成一堆具有相同 id 的元素。
而是使用事件委托来捕获按钮点击。您可以使用它来查找要显示的元素。
$(".message-link").on("click", "input.reply", function () {
$(this).closest('.comment-square').find(".fn").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message-link more ">
<div class="comment-square">
<div>
<h5>XXX</h5>
</div>
<p class="comment-text">Foo Bar
<input class="reply" type="button" value="Reply"><br>
</p>
<div class="fn" hidden><input type="text" /></div><br>
</div>
<div class="comment-square">
<div>
<h5>XXX</h5>
</div>
<p class="comment-text">Foo Bar
<input class="reply" type="button" value="Reply"><br>
</p>
<div class="fn" hidden><input type="text" /></div><br>
</div>
</div>
脚本应该出现在message-link
div 之后或被包装在准备好的文档中。
推荐阅读
- css - JavaFX 使用 CSS 修改字体而不替换文本
- firebase - 如何提高 Flutter 应用中 Firebase 身份验证的速度
- java - 无法在 java api Twitter API 调用中授权。错误 215
- python - 在 Windows 上安装 Matplotlib 错误 - 无法打开包含文件 'ft2build.h'
- c++ - 根据条件声明大变量的方法
- amazon-s3 - Amazon S3 AccessDenied:在 Request.extractError 处拒绝访问 - 带有活动对象标记
- javascript - 如何实现使用 API 获取信息的搜索栏
- firebase - 如何从firestore按月订购?
- pandas - 如何绘制图表,使其添加到先前值的值,而不是将其绘制在零线上
- python - 我无法将 xls 文件从一个目录复制到另一个目录