我有几个问题,用户将单击"is"或“否”按钮,并希望将其单击的值 append 到一个显示他们选择的内容的空类中。
每次我单击"is"或“否”时,该值都会 append 到每个问题中,以便在底部显示这些值,即“是、否、否、是”。我希望只显示该特定问题的值。
到目前为止我所拥有的 -
$(function() {
var answer = $(".answer");
answer.each(function(index) {
$(this).on("click", function(){
var userAnswer = $(this).attr("data-id");
var displayAnswer = $(".display-answer");
displayAnswer.each(function() {
$(this).append(userAnswer);
});
});
});
});
HTML
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi. Similique dolorem modi quos eius in, unde, sapiente, non ipsa aliquam accusamus quis facilis enim.</p>
<div class="answer-buttons">
<div class="answer yes"><p>Yes</p></div>
<div class="answer no"><p>No</p></div>
</div>
<div class="display-answer"></div>
</div>
最佳答案
这是获得您描述的结果的方法
$(function(){
$(".answer").click(function(){ /*You can register the click handler easily in one step*/
var userAnswer = $(this).attr("data-id");
$(this).parent().siblings(".display-answer").append(userAnswer); /*First, find the parent, then the "display-answer" siblings*/
});
});
p{
font-family:sans-serif;
}
.answer{
border:1px solid black;
text-align:center;
flex-grow:100;
width:100px;
display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi. Similique dolorem modi quos eius in, unde, sapiente, non ipsa aliquam accusamus quis facilis enim.</p>
<div class="answer-buttons">
<div class="answer yes" data-id="yes"><p>Yes</p></div>
<div class="answer no" data-id="no"><p>No</p></div>
</div>
<div class="display-answer"></div>
</div>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi. Similique dolorem modi quos eius in, unde, sapiente, non ipsa aliquam accusamus quis facilis enim.</p>
<div class="answer-buttons">
<div class="answer yes" data-id="yes"><p>Yes</p></div>
<div class="answer no" data-id="no"><p>No</p></div>
</div>
<div class="display-answer"></div>
</div>
关于jquery - 如何仅 append 到每个 div 一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56940672/