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

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 に答える
0

このためのフォームでラジオ ボタンを使用することをお勧めします。そうは言っても、ここにあなたが探していると思う答えのフィドルがあります。ここにはいくつかの良い答えがあります。:-)

于 2012-07-24T08:48:25.513 に答える