0

我将如何使用 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>

提前谢谢了。

4

3 回答 3

1

要切换<li>元素：

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

要查找选定的<li>元素：

var answers = $('.answer li.selected').map(function() {
    return this.id;
}).get();
于 2012-07-24T08:48:35.510 回答
0

我建议您为此使用表单中的单选按钮。也就是说，这里有一个我认为你正在寻找的答案的小提琴，这里有一些很好的答案。:-)

于 2012-07-24T08:48:25.513 回答
0

这是一个有效的例子 - 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是问题的数量。

于 2012-07-24T08:50:50.207 回答