Question

感谢任何帮助/指导。（如果下面没有什么要说的，请告诉我。我会尽力澄清）

问题： 当用户点击该广告发布的回复按钮时，我无法显示相应的div。 div元素显示=无（默认情况下）。

代码遍历： 我有一个html代码，其中使用循环显示数据库中的所有帖子（我正在使用ejs格式将数据呈现给浏览器）。所有帖子都有回复按钮。如果用户单击回复按钮，则相应的div应该可见（用户可以在其中将回复发送到帖子）。

技术堆栈 ：（如果需要）我正在使用带有.ejs / css的Nodejs + express将数据呈现到Web浏览器。数据库为mongodb

（注意：由于所有帖子都有一个回复按钮，因此有多个回复按钮）

HTML代码：

<article>
      <% for(var i=0; i<postList.length; i++) { %>
      <section>
        <div class="container">
          <h1><%= postList[i].title %></h1>
          <a href="" data-id="<%= postList[i]._id %>" class="delete">delete</a>
          <a href="" data-id="<%= postList[i]._id %>" class="edit">edit</a>
          <p><%= postList[i].description %></p>
          <h4><%= postList[i].pincode %></h4>
          <h4><%= postList[i].address %></h4>
          <button class="reply-button">Reply</button><br>
          <!--class reply-block is hidden by default-->
          <!--This div should become visible when user clicks on the above reply  button-->
          <div class="reply-block">
            <textarea rows="4" cols="50"></textarea><br>
            <button class="reply-submit" data-id="<%= postList[i]._id %>">send</button>
            <button class="reply-cancel">cancel</button>
          </div>
        </div>
      </section>
      <% } %>
    </article>

Answer 1

使用jQuery，您可以在文章HTML之后的<script>标签中插入此Javascript：

$(".reply-button").click(function(e) {
    // make corresponding reply-block visible
    $(this).closest(".container").find(".reply-block").show();

    // other code here to act on the click
});

.closest(".container")沿着父树走去找到最接近的.container，然后使用.find(".reply-block")在该容器中找到回复块，然后使用.show()进行创建它可见。

这假设您将其设为display:none，这就是隐藏它的方式。如果您以其他方式隐藏它，则必须更改使其可见以与之相对应，无论您如何隐藏它。

一旦点击该帖子广告上的回复按钮，如何使相应的div可见？

1 个答案: