[英]Thymeleaf foreach loop with button event inside
I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. 我已使用Thymeleaf foreach遍历所有帖子,每个帖子都有一个“评论”按钮。 I would like to display the comment list after click this "Comment" button.
单击此“评论”按钮后,我想显示评论列表。
The following is my codes: 以下是我的代码:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="@{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="@{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop? 如何在foreach循环中执行此操作?
You can do this by using js
, below are example codes. 您可以使用
js
来执行此操作,以下是示例代码。
First, you need to add onclick
to commit button: 首先,您需要添加
onclick
提交按钮:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv
to dispaly the div. 然后,获取隐藏的div并编辑
showDiv
函数以显示div。
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you! 希望这个能对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.