Question

我正在学习javascript（jquery）并且我编写了一个简单的测验。我已经走了很长的路，大多数情况下，如果它的功能应该是，但是，我发现很难实现＆＃34;缺血＆＃34;检查器只允许人们在回答完最后一个问题时转到下一个问题。

整个测验是关于plunker：http://plnkr.co/edit/qIqa2mHtIOwZNGS2hSBd

我使用以下行禁用了问题代理功能中的按钮：$("<button>Next</button>").addClass("next").prop('disabled', true).insertAfter("form");

相关的jquery代码：

  var blaat = function() {
       var isChecked = $('input[name=group1]:checked').length;
       if (isChecked) {
           $(".form").find(".next").prop('disabled', false);
           var answer = $('input[name=group1]:checked', '#form').next().text();
           checkAnswer(answer);
       }
    };

它永远不会激发这一行：$(".form").find(".next").prop('disabled', false); 因为当我把这条线放在chromes控制台时它完美无缺。我错过了什么？

Answer 1

我看到你的代码尝试添加 $（＆＃34;输入[类型=＆＃39;无线电＆＃39;]＆＃34）。在（＆＃34;单击＆＃34;，blaat）; 在init函数中

Answer 2

这里的问题是你没有在更改radio选项的事件中附加处理程序，因此每当用户选择答案时，都不会发生任何事情。

您只需将此位添加到您的代码中：

$(".form input").on("change", blaat);

我也做了一些更改，最终的代码（建议）看起来像这样：

$(function () {
    var allQuestions;

    allQuestions = [{
        question: "Who is Prime Minister of the United Kingdom?",
        choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
        correctAnswer: 0
    }, {
        question: "Name the king who failed to keep an eye on things at the battle of Hastings ?",
        choices: ["David Cameron", "Harold", "Winston Churchill", "Tony Blair"],
        correctAnswer: 1
    }, {
        question: "In which sport would you use a chucker ?",
        choices: ["Ice hockey", "Billiards", "Polo", "Curling"],
        correctAnswer: 2
    }, {
        question: "If a snail climbed up a 12 ft wall at a steady rate of 3 feet a day, but slipped down 2ft every night, how many days would it take him to reach the top ?",
        choices: ["10 days", "9 days", "8 days", "12 days"],
        correctAnswer: 0
    }, {
        question: "Traditionally, what type of wood do Rolls Royce use on the dashboards of their cars?",
        choices: ["Shit", "Gordon Brown", "Winston Churchill", "Walnut"],
        correctAnswer: 3
    }, {
        question: "What is the national emblem of Canada ?",
        choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Maple leaf"],
        correctAnswer: 3
    }, {
        question: "Free Willey was a film about what ?",
        choices: ["David Cameron", "Whale", "Winston Churchill", "Tony Blair"],
        correctAnswer: 1
    }, {
        question: "What World War II operation was code named `Dynamo` ?",
        choices: ["David Cameron", "Gordon Brown", "Evacuation of Dunkirk", "Tony Blair"],
        correctAnswer: 2
    }, {
        question: "How many old pennies were there in a Groat?",
        choices: ["One", "Two", "Three", "Four"],
        correctAnswer: 3
    }, {
        question: "In cricket, where would you find the chain ?",
        choices: ["Between the wickets", "Gordon Brown", "Winston Churchill", "Tony Blair"],
        correctAnswer: 0
    }];

    var correctAnswers = 0;
    var currentQuestion = 0;
    var answer = allQuestions[currentQuestion].choices[allQuestions[currentQuestion].correctAnswer];

    function init() {
        var question = allQuestions[currentQuestion].question;
        var $questions = $(".form input");

        $questions.each(function (index) {
            var choices = allQuestions[currentQuestion].choices[index];
            $(this).next().text(choices);
        });

        $("<h2></h2>").text(question).insertBefore("form");
        $("<button>Next</button>").addClass("next").prop("disabled",true).on('click', addView).insertAfter("form");
    }

    function addView() {
        var $input = $("#form").children(); // $('#form input')

        currentQuestion++;

        $("h2, button").remove();
        $input.prop('checked', false);

        var question = allQuestions[currentQuestion].question;    
        var $questions = $(".form input");

        $questions.each(function (index) {
            var choices = allQuestions[currentQuestion].choices[index];
            $(this).next().text(choices);
        });

        $("<h2></h2>").text(question).insertBefore("form");
        $("<button>Next</button>").addClass("next").prop("disabled", true).on('click', addQuestion).insertAfter("form");
    }

    function addQuestion() {
        if (currentQuestion < 10) {
            addView();
        } 
        else {
            $(".next").on("click", function () { // need to write this function <--
                console.log("it worked!");
            });
        }
    }

    function blaat() {
        var isChecked = $('input[name=group1]:checked').length;

        if (isChecked) {
            $(".form").find(".next").prop("disabled", false);
            var answer = $('input[name=group1]:checked', '#form').next().text();
            checkAnswer(answer);
        }
    }

    function checkAnswer(answer) {    
        var correctAnswer = allQuestions[currentQuestion].correctAnswer;
        var indexAnswer = allQuestions[currentQuestion].choices[correctAnswer];

        if (indexAnswer == answer) {
            correctAnswers++;
            console.log(correctAnswers);
            $(".record").text("You have answered " + correctAnswers + " questions correctly!");
            return answer;
        } 
        else {
            console.log("answer is not correct!");
        }
    }

    $("#start").on("click", function () {
        $(".start").css("display", "none");
        $(".quiz").find(".form").removeClass("hidden");

        init();
    });

    $(".form input").on("change", blaat);
});

Demo

无法在jquery中重新启用disabled属性

2 个答案: