0

这基本上是一个多项选择测试页面。每个 div 类 .choice 都包含一个答案（选项 1-5 等）。

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

然后 checkAnswer 会显示正确或不正确的消息并滚动到下一组问题。问题是我希望他们只单击一个选项，然后当“下一个”链接似乎有下一组答案 div 可以再次单击时。

unbind bind on off add/remove class something something 这是 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 回答