0

これは基本的に複数選択のテスト ページです。各 div クラスの .choice には回答 (選択肢 1 ～ 5 など) が含まれています。

$('.choice').click(function () {
        checkAnswer(this.id, this.title);
});

そして、checkAnswer は正しいまたは正しくないメッセージを表示し、次の一連の質問にスクロールします。問題は、「次の」リンクに次の回答divのセットが再びクリック可能になるように表示されたときに、1つの選択肢のみをクリックしてもらいたいことです。

アンバインド バインド オン オフ 追加/削除 クラス 何か 何か これが HTML です

                        <div class="wrap-choices">
                            <div id="1a" title="Q1" class="choice">
                                <p>
                                    <span>A. </span>Car
                                </p>
                            </div>
                            <div id="1b" title="Q1" class="choice">
                                <p>
                                    <span>B. </span>Cat
                                </p>
                            </div>

                            <div id="1c" title="Q1" class="choice">
                                <p>
                                    <span>C. </span>Cow
                                </p>
                            </div>
                            <div id="1d" title="Q1" class="choice">
                                <p>
                                    <span>D. </span>All of the above
                                </p>
                            </div>

配列内の回答を確認する部分は次のとおりです

function checkAnswer(answerID,qNumber) {

var arr = ['1d', '2c', '3d', '4b'];
var correct = $.inArray(answerID, arr);
//display an incorrect or correct popup
if (correct > -1) {
    $('.' + qNumber + ' .correct').show();

} else {
    $('.' + qNumber + ' .incorrect').show();
}
//add code to disable clicking any other div here
$('.next').show();
//and then when clicking on that next image, the click is enabled again for those divs
};
4

1 に答える 1

0

これが私がそれを行う方法です：

HTML:

<form>
    <div id="q-1" class="question">
        <p>Question?</p>
        <input type="radio" name="answer-1" value="A" />A
        <input type="radio" name="answer-1" value="B" />B
        <input type="radio" name="answer-1" value="C" />C
        <input type="radio" name="answer-1" value="D" />D
        <p><a href="#q-2">Next</a></p>

    </div>
    <div id="q-2" class="question">
        ...
    </div>
    <div id="q-3" class="question">
        ...
    </div>
</form>

JS:

$('.question input[type="radio"]').click(function () {
    // checkAnswer(this.id, this.title);
    // You may want to add a title attribute and use this.parentNode.id instead

    // The code below randomly decides if it's true or false, FOR TESTING ONLY
    var check = Math.floor( Math.random() * 2 ); 
    $(this).nextAll('p').prepend(check ? 'correct ' : 'incorrect ').fadeIn();    

    $(this).siblings('input[type="radio"]').addBack().prop('disabled', true);
    $(this).parent().next().find('input[type="radio"]').prop('disabled', false);
});

CSS:

.question p{display:none}
.question p:first-child{display:block;}

コードをできるだけ小さく保つために、多くの jQuery 関数を使用しました。いくつかの有用なドキュメント ページへのリンクについては、以下を参照してください。

これが実際のデモです: http://jsfiddle.net/R9MCT/2/

于 2013-06-09T16:43:53.180 に答える