如何仅附加到每个 div 一次
How to append to each div only once
我有几个 div 问题,用户会点击是或否按钮,并希望将他们点击的值附加到显示他们选择的内容的空 class。
每次我点击“是”或“否”时,该值都会附加到每个问题,因此在底部会显示值,即是,否,否,是。我想要它以便仅显示该特定问题的值。
到目前为止我有什么 -
$(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>
基于您的标记的简单示例:
$('.answer').on('click', function() {
$(this).parent().next().html($(this).html());
// `$(this).html()` gets the html of an element you clicked on
// `$(this).parent().next()` - gets `.display-answer` element which
// is located `next` to the `parent` of the element you clicked
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="question-wrap">
<p>Question 1.</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>
<div class="question-wrap">
<p>Question 2.</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>
<div class="question-wrap">
<p>Question 3.</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>
感谢您提供 html。这意味着我们可以提供帮助!
U_mulder 的答案绝对有效,只要结构保持完全相同。我使用索引的建议行不通,因为每个问题有两个 "answer" 类。
在我添加的代码片段中,您会看到我首先使用 .parents(".question-wrap").eq(0)
查找 question-wrap div,然后使用 .children(".display-answer").eq(0)
查找显示 div。 .children()
仅在元素的直接子元素中搜索。如果需要往下看(parents()
相反),使用.find()
.
在这里您将看到它的实际效果(使用 .text()
获取值,因为没有 data-id 属性)
$(function() {
var answer = $(".answer");
answer.each(function(index) {
$(this).on("click", function(){
var userAnswer = $(this).text();
var displayAnswer = $(this).parents(".question-wrap").eq(0).children(".display-answer").eq(0);
displayAnswer.text(userAnswer);
});
});
});
.question-wrap {
flex: 1;
min-width: 150px;
display: inline-block;
margin-left: 10px;
}
.answer {
cursor: pointer;
}
.display-answer {
height:20px;
padding: 10px;
border: 1px solid lightgreen
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; flex-wrap: wrap">
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
</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>
我有几个 div 问题,用户会点击是或否按钮,并希望将他们点击的值附加到显示他们选择的内容的空 class。
每次我点击“是”或“否”时,该值都会附加到每个问题,因此在底部会显示值,即是,否,否,是。我想要它以便仅显示该特定问题的值。
到目前为止我有什么 -
$(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>
基于您的标记的简单示例:
$('.answer').on('click', function() {
$(this).parent().next().html($(this).html());
// `$(this).html()` gets the html of an element you clicked on
// `$(this).parent().next()` - gets `.display-answer` element which
// is located `next` to the `parent` of the element you clicked
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="question-wrap">
<p>Question 1.</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>
<div class="question-wrap">
<p>Question 2.</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>
<div class="question-wrap">
<p>Question 3.</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>
感谢您提供 html。这意味着我们可以提供帮助!
U_mulder 的答案绝对有效,只要结构保持完全相同。我使用索引的建议行不通,因为每个问题有两个 "answer" 类。
在我添加的代码片段中,您会看到我首先使用 .parents(".question-wrap").eq(0)
查找 question-wrap div,然后使用 .children(".display-answer").eq(0)
查找显示 div。 .children()
仅在元素的直接子元素中搜索。如果需要往下看(parents()
相反),使用.find()
.
在这里您将看到它的实际效果(使用 .text()
获取值,因为没有 data-id 属性)
$(function() {
var answer = $(".answer");
answer.each(function(index) {
$(this).on("click", function(){
var userAnswer = $(this).text();
var displayAnswer = $(this).parents(".question-wrap").eq(0).children(".display-answer").eq(0);
displayAnswer.text(userAnswer);
});
});
});
.question-wrap {
flex: 1;
min-width: 150px;
display: inline-block;
margin-left: 10px;
}
.answer {
cursor: pointer;
}
.display-answer {
height:20px;
padding: 10px;
border: 1px solid lightgreen
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; flex-wrap: wrap">
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
<div class="question-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</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>
</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>