如何添加类，并在完成后获得结果
如何添加类，并在完成后获得结果
提问于 2012-07-24 16:31:31
我该如何使用jQuery将一个“选定的”类添加到这个LI中呢？一旦所有6个问题都被选中，我将需要通过这些问题，并获得选定的答案。我已经将问题ID和答案ID添加到每个答案中，这可能会使以后更容易获取和处理。
<div id="1002" class="question2" style="display: block; ">
<h1>Question 2</h1>
<p><i>This is Question 2</i></p>
<div class="answer-grid">
<ul class="answer">
<li id="1002-a1">Answer 1</li>
<li id="1002-a2">Answer 2</li>
<li id="1002-a3">Answer 3</li>
</ul>
</div>
</div>这是我想要的样子..。
<div id="1002" class="question2" style="display: block; ">
<h1>Question 2</h1>
<p><i>This is Question 2</i></p>
<div class="answer-grid">
<ul class="answer">
<li id="1002-a1" class="selected">Answer 1</li>
<li id="1002-a2">Answer 2</li>
<li id="1002-a3">Answer 3</li>
</ul>
</div>
</div>在此之前，非常感谢您。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-07-24 16:48:36
要切换<li>元素，请执行以下操作：
$('.answer li').on('click', function() {
$(this).addClass('selected').siblings().removeClass('selected');
});要查找选定的<li>元素：
var answers = $('.answer li.selected').map(function() {
return this.id;
}).get();Stack Overflow用户
发布于 2012-07-24 16:50:50
这是一个工作的实际例子-- http://jsfiddle.net/3fPaC/。
代码-
$(document).ready(function() {
var count = 0;
$("li").click(function() {
if($(this).siblings().hasClass("selected")) {
$(this).siblings().removeClass("selected");
count--;
$("#result").text("");
}
$(this).addClass("selected");
var question = $(this).attr("question");
$("#"+question).addClass("answered");
count++;
if(count == 3) {
$(".selected").each(function() {
$("#result").append(" "+$(this).text());
});
}
});
});此外，不要只使用数字作为ID，因为它可能会导致问题。
HTML代码-
<div id="result"></div>
<div id="question1002" class="question2" style="display: block; ">
<h1>Question 2</h1>
<p><i>This is Question 2</i></p>
<div class="answer-grid">
<ul class="answer">
<li question="question1002" answer="a1">Answer 1111</li>
<li question="question1002" answer="a2">Answer 2111</li>
<li question="question1002" answer="a3">Answer 3111</li>
</ul>
</div>
</div>
<div id="question1003" class="question2" style="display: block; ">
<h1>Question 2</h1>
<p><i>This is Question 2</i></p>
<div class="answer-grid">
<ul class="answer">
<li question="question1003" answer="a1">Answer 1</li>
<li question="question1003" answer="a2">Answer 2</li>
<li question="question1003" answer="a3">Answer 3</li>
</ul>
</div>
</div><div id="question1004" class="question2" style="display: block; ">
<h1>Question 2</h1>
<p><i>This is Question 2</i></p>
<div class="answer-grid">
<ul class="answer">
<li question="question1004" answer="a1">Answer 122</li>
<li question="question1004" answer="a2">Answer 222</li>
<li question="question1004" answer="a3">Answer 322</li>
</ul>
</div>
</div>您可以将count == 3更改为您喜欢的任何值。3是问题的数量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11627035
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号