Question

这基本上是一个多选题测试页面。每个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
};

Answer 1

我将如何做到这一点：

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/

一旦选中一个，jQuery禁用单击其他div，然后在下一组上再次单击该类

1 个答案: