我正在尝试调试以下循环。我从来没有到最后一个警报(“ YO”)。另外,有趣的是,我期望5个alert(typeof ...),但是我只有4个。



function Question(topic,question,choices,correctAnswer){
    this.topic = topic;
    this.question = question;
    this.choices = choices;
    this.correctAnswer = correctAnswer;
    this.userAnswer = null;
}

var allQuestions;
allQuestions = [
    new Question("Addition", "What is 8 + 8?", [16, 18, 64, 28], 16),
    new Question("Subtraction", "What is 23-8?", [16, 15, 14, 17], 15),
    new Question("Multiplication", "What is 8 * 8?", [16, 18, 64, 36], 64),
    new Question("Division", "What is 48/16", [3, "3/2", 4, "8/3"], 3),
    new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
];


function qToHTML(question) {
    var header = "<h2>" + question.topic + "</h2>";
    var qText = "<p>" + question.question + "</p>";
    var options = "";
    for (var i = 0; i < question.choices.length; i++) {
        options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>"
    }
    var wrapper = "<div class='question'></div>";

    var HTMLstring;
    HTMLstring = header + qText + options;
    $("#question-box").append(HTMLstring).wrap(wrapper);
}



$(document).ready(function(){
    //render questions
    for(var i = 0; i < allQuestions.length; i++){
        qToHTML(allQuestions[i]);
    }

    //collect and check user answers
    $('form').on('submit', function() {
        var numCorrect = 0;
        for(var i = 0; i < allQuestions.length; i++){

            // collect answers
            var currentQ = allQuestions[i];
            currentQ.userAnswer = $("input[name=" + currentQ.topic + "]:checked").val();
            alert(typeof currentQ.correctAnswer);

            // check answers
            if (currentQ.correctAnswer == currentQ.userAnswer) {
                numCorrect++;
            }
        }
        window.alert('YO');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic Quiz</title>
    </head>
    <body>
        <H1>Dynamic Quiz</H1>
        <form>
            <div id="question-box"
                <!--
                <div class="question">
                    <h2></h2>
                    <p></p>
                    <input type="radio" name="" value="">
                    <input type="radio" name="" value="">
                    <input type="radio" name="" value="">
                    <input type="radio" name="" value="">
                </div>-->
            </div>

            <input type="submit" value="submit">
        </form>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

最佳答案

问题是您的attribute equals selector在值周围没有引号。当名称中有空格时,此操作将失败。

因此使用:$("input[name='" + currentQ.topic + "']:checked").val();

代替:$("input[name=" + currentQ.topic + "]:checked").val();

这导致jQuery错误和javascript异常,从而立即终止您的代码。

完整的可运行示例:



function Question(topic,question,choices,correctAnswer){
    this.topic = topic;
    this.question = question;
    this.choices = choices;
    this.correctAnswer = correctAnswer;
    this.userAnswer = null;
}

var allQuestions;
allQuestions = [
    new Question("Addition", "What is 8 + 8?", [16, 18, 64, 28], 16),
    new Question("Subtraction", "What is 23-8?", [16, 15, 14, 17], 15),
    new Question("Multiplication", "What is 8 * 8?", [16, 18, 64, 36], 64),
    new Question("Division", "What is 48/16", [3, "3/2", 4, "8/3"], 3),
    new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
];


function qToHTML(question) {
    var header = "<h2>" + question.topic + "</h2>";
    var qText = "<p>" + question.question + "</p>";
    var options = "";
    for (var i = 0; i < question.choices.length; i++) {
        options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>"
    }
    var wrapper = "<div class='question'></div>";

    var HTMLstring;
    HTMLstring = header + qText + options;
    $("#question-box").append(HTMLstring).wrap(wrapper);
}



$(document).ready(function(){
    //render questions
    for(var i = 0; i < allQuestions.length; i++){
        qToHTML(allQuestions[i]);
    }

    //collect and check user answers
    $('input[type="button"]').on('click', function() {
        var numCorrect = 0;
        for(var i = 0; i < allQuestions.length; i++){

            // collect answers
            var currentQ = allQuestions[i];
            currentQ.userAnswer = $("input[name='" + currentQ.topic + "']:checked").val();
            alert(typeof currentQ.correctAnswer);

            // check answers
            if (currentQ.correctAnswer == currentQ.userAnswer) {
                numCorrect++;
            }
        }
        window.alert('YO');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic Quiz</title>
    </head>
    <body>
        <H1>Dynamic Quiz</H1>
        <form>
            <div id="question-box"
                <!--
                <div class="question">
                    <h2></h2>
                    <p></p>
                    <input type="radio" name="" value="">
                    <input type="radio" name="" value="">
                    <input type="radio" name="" value="">
                    <input type="radio" name="" value="">
                </div>-->
            </div>

            <input type="button" value="submit">
        </form>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

关于javascript - 将html属性设置为javascript变量时,为什么循环在警报语句之前终止?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26429029/

10-11 23:26
查看更多