Jquery 如何添加类，并在完成后获得结果

在本例中，我如何使用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>

问题2
这是问题2


回答1
回答2
回答3

这就是我希望它看起来的样子

 <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
这是问题2


回答1
回答2
回答3

---

非常感谢。我建议您在表单中使用单选按钮。也就是说，这里有一个问题的答案，我想你正在寻找这里有一些很好的答案。：-）

要切换

元素：

$('.answer li').on('click', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

var answers = $('.answer li.selected').map(function() {
    return this.id;
}).get();

要查找选定的

元素，请执行以下操作：

$('.answer li').on('click', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

var answers = $('.answer li.selected').map(function() {
    return this.id;
}).get();

---

下面是一个实际的例子，它确实有效

代码-

$(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>​

问题2
这是问题2


回答1111
回答2111
回答3111

问题2
这是问题2


回答1
回答2
回答3

问题2
这是问题2


回答122
回答222
回答322

​

---

您可以将计数==3更改为您喜欢的任何值。3是问题的数量。

还没有，我不确定怎么做，这就是我请求帮助的原因：）请定义“选定答案”。给定标记中没有可选字段或其他输入。更新的代码。。。基本上，我想选择一个LI并将所选的类添加到其中。我还需要知道如何取回所选的li，以便将它们传递给Web服务。你是说要单击li？这些都是多项选择，所以您只能在每组中选择一个？您希望如何选择LI？看起来你需要一个单选按钮列表，旁边有答案或者类似的东西。。。如果你这样做的话，你可能只需要使用表单提交就可以轻松地完成这一切。。。从用户界面的角度来看，这也会更好，因为通常对于多个巧克力问题，人们希望单选按钮、点击框或其他东西，而不仅仅是点击一些项目符号列表文本。尽管不要忘记，使用

可以将文本链接到单选按钮……好的一点是，使用兄弟姐妹（）更好。我觉得我把太多精力放在了眼前的解决方案上。@AndersHolmström同意，你的很好，但Alnitak的做得正是我想要的：）谢谢你，伙计，你是一个飞行明星！！！非常感谢你在这方面的帮助：D这真是一种享受！我将如何分割问题ID和答案？这样我就可以将其传递给Web服务进行检查了

var jsonText=JSON.stringify（{answer:answers}）我已经这样做了far@thatuxguy使用
返回此.id.split（'-'）
-您将得到一个包含问题id和答案编号的两元素数组。我做了一个细微的更改，返回了所选答案的文本。如何将答案和问题ID带回，以便将它们放入字符串中<代码>返回“{问题：“+this.id+”，回答：“+$（this.html（）+”}”-由于某些原因\“没有添加引号。不要尝试序列化您自己的JSON。使用
返回{问题：this.id，答案：$（this.text（）}；