如何使用jquery和thymeleaf创建动态按钮，每个按钮都有自己的事件侦听器
提问于 2020-07-16 13:52:36
我的目标是构建一个动态FAQ页面，其中问题是可见的，当您单击上述问题时，带有答案的div将出现。一旦您再次单击div，它将再次切换。我已经尝试了一些东西，我完成的最好的结果是切换第一个问题的答案，而不管点击的是什么问题。
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link href="./img/favicon.png" rel="shortcut icon"/>
<meta charset="utf-8"/>
<meta content="width=1280, maximum-scale=1.0" name="viewport"/>
<link th:href="@{css/faq.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{css/faq-new.css}" rel="stylesheet" type="text/css"/>
</head>
<body style="margin: 0;
background: rgba(255, 255, 255, 1.0);">
<input id="anPageName" name="page" type="hidden" value="faq"/>
<div class="faq">
<th:block th:insert="_header.html :: header"></th:block>
<div class="rectangle2">
</div>
<div class="justaskus">
Just Ask Us
</div>
<!-------========= FAQ =========------------->
<div class="faq-container">
<div class="th-start" th:block th:each="faqType, stats : ${faqTypeDaoList}">
<div class="q-type-wrapper">
<div class="type-header">
<h4 th:text="${faqType.faqTypeName}"></h4>
</div>
<!----========= Question ========--------->
<div class="th-wrap" th:each="question, stat: ${faqTypeDaoList[_${stats.index}_].faqList}">
<a href="#">
<div id="box" class="question-box">
<div class="bullet"></div>
<img th:src="@{img/artboard-copy-3-unnamed-3@2x.png}" class="arrow"/>
<img th:src="@{img/artboard-copy-3-unnamed-13@2x.png}" class="unnamed" style="display:none;"/>
<div class="questions" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].question}"></div>
<div id="answers" class="dropdown-answer" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].answer}"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#box').on("click", ()=> {
$(this).children[3].toggle();
});
});
</script>这就是我当前的代码，它什么也做不了。下面是我做过的一些尝试
/* One attempt */
$('.questions').on("click",function(){
// "this" in $(this) --> means the current clicked element
// .find() will search the CHILDREN of the clicked element with the class "sub-nav"
$(this).find("dropdown-answer").toggle();
});
/* Another attempt. This one toggled only the first question's answer regardless if what button was clicked. */
var click = document.getElementById("dropdown-answer");
if(click.style.display === "none") {
click.style.display = "block";
}
else {
click.style.display = "none";
}这有可能吗？
回答 1
Stack Overflow用户
发布于 2020-07-16 14:12:59
find()将在您提供的元素中找到子元素(因此在本例中将this放入其中，因此为.questions)，但您的.dropdown-answer不是该元素的子元素。
你可以这样写它
$(this " + .dropdown-answer").toggle();或者将该元素放在.questions元素中，并像这样获取它
$(this).find(".dropdown-answer").toggle();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62936312
复制
腾讯云开发者
