javascript - 页面加载时未加载第一张图片

Question

我正在制作一个简单的测验应用程序。我正在使用 JQuery，但我的第一个问题是页面加载时没有加载。但是如果我点击清除（重置）按钮，那么它加载页面很好。

//On Submit Button
  $("button#answer").on("click",function(){
    checkAnswer();
    questionNumber++;

    if(questionNumber === questions.length){
      $(this).css("display","none");
      $("#clear").css("display","block");
    }
    else {
      nextQuestion();
    };
  });

完整的工作代码在这个 JS Fiddle - http://jsfiddle.net/dQgbs/

我没有加载我的图像来摆弄，但是当你运行它时你会看到你只会看到按钮，但是当你点击答案按钮时，你会得到第二个问题。

Answer 1

尝试调用nextQuestion();文档准备就绪

这是一个演示

Answer 2

嘿，我对代码进行了一些更改，例如。

在 html 代码中，我添加了一个按钮——开始

<nav class="nav-bar">
    <div class="nav-hold"> <a href="#" class="nav-logo">Qu<span id="blink">:</span>z Time - Guess this person</a>
 <a href="#" class="nav-status" id="quiz_status"></a>

    </div>
</nav>
<div class="wrap_container">
    <div class="firstContainer">
        <img id="question_image" src="" alt="" />
    </div>
    <div class="secondContainer">
        <div class="answers"></div>
    </div>
    <div class="action">
        <button id="answer">Answer</button>
        <button id="start">Start</button>
        <button id="clear">Clear</button>
    </div>
</div>

在 CSS 中——

#start{
    margin-left:50%;
    }

在脚本中——

$(document).ready(function () {

    $("button#answer").css("display", "none");
    $("button#clear").css("display","none");
    //Global Variables

    var questionNumber = 0,
        correctAnswers = 0,
        counter = 0,
        userAnswers = new Array(),

        questions = [{

            question: "Images/img1.jpg",
            choices: ["img1", "img2", "img3", "img4", "img5"],
            quesNum: 1,
            correctAns: 0
        },

        {
            question: "Images/img2.jpg",
            choices: ["img1", "img2", "img3", "img4", "img5"],
            quesNum: 2,
            correctAns: 1
        },

        {
            question: "Images/img3.jpg",
            choices: ["img1", "img2", "img3", "img4", "img5"],
            quesNum: 3,
            correctAns: 3
        },

        {
            question: "Images/img4.jpg",
            choices: ["img1", "img2", "img3", "img4", "img5"],
            quesNum: 4,
            correctAns: 2
        },

        {
            question: "Images/img5.jpg",
            choices: ["img1", "img2", "img3", "img4", "img5"],
            quesNum: 5,
            correctAns: 4
        }];

    //Question Number
    $("#quiz_status").text("Question " + questions[0].quesNum + " of " + questions.length);


/**********my code**************/

$("button#start").on("click", function(){

    $("button#answer").css("display","block");
    $("button#clear").css("display","block");
    $("button#start").css("display","none");
     checkAnswer();
     if (questionNumber === questions.length) {
            $(this).css("display", "none");
            $("#clear").css("display", "block");
        } else {
            nextQuestion();
        };

    });
/**********my code**************/
    //On Submit Button
    $("button#answer").on("click", function () {
                    alert("second");
        checkAnswer();

         questionNumber++;
        if (questionNumber === questions.length) {
            $(this).css("display", "none");
            $("#clear").css("display", "block");
        } else {
            nextQuestion();
        };

    });

    //On Clear Quiz Button
    $("button#clear").on("click", function () {
        restart();
        nextQuestion();
    });

    //Move to next question - update question & answers
    function nextQuestion() {
        $("#quiz_status").text("Question " + questions[questionNumber].quesNum + " of " + questions.length);
        $("#question_image").attr({
            src: questions[questionNumber].question,
            alt: 'Picture'
        }).height(200).width(200);

        var multChoice = $.each(questions[questionNumber].choices, function (index, value) {
            value
        });
        $("div.answers label").remove();
        $.each(multChoice, function (index, value) {
            $("div.answers").append("<label class='radio'><input type='radio' name='check' data-ans=" + index + ">" + value + "</label>");
        });
    }

    //Check user answer against correct answer - store user answer & keep count for right or wrong answers
    function checkAnswer() {

        var userAns = $("input[type=radio]:checked").data("ans");

        userAnswers.push(userAns);

        if (userAns === questions[counter].correctAns) {
            correctAnswers++;
        }
        counter++;
    }

    $(correctAnswers).appendTo('quiz_status');

    //Restart Quiz
    function restart() {
        questionNumber = 0;
        correctAnswers = 0;
        counter = 0;
        userAnswers = new Array();
        $("#answer").css("display", "block");
        $("#clear").css("display", "none");
    }

    // Function to create a BLINK TEXT effect
    function blink(selector) {
        $(selector).animate({
            opacity: 0
        }, 50, "linear", function () {
            $(this).delay(800);
            $(this).animate({
                opacity: 1
            }, 50, function () {
                blink(this);
            });
            $(this).delay(800);
        });
    }
    blink("a #blink"); //Call blink text function

});

看演示