Question

我正在尝试编写一个琐事游戏。我想出了如何用适当的答案显示问题。现在，我必须弄清楚用户是否点击了正确的答案。我想我需要使用if / else语句，但我不完全确定接下来我需要采取哪些步骤。这是现场网站的链接 - （我知道还有一些造型要做。

https://alyciamriley.github.io/Trivia-game-easier/

这是我的JS代码 -

     window.onload = function () {


    var intervalId
    var timer = 10;
    var questionArray = [{

            question: 'Who recorded the original version of the song "Hound Dog"?',
            answers: ['Willa Mae "Big Mama" Thornton', 'Elvis Presley', 'Carl Perkins', 'Chuck Berry', 'Miley Cyrus'],
            correctAnswer: 'Willa Mae "Big Mama" Thornton',
}, {

            question: 'Who was marketed by her record company as the "female Elvis"?',
            answers: ['Wanda Jackson', 'Janis Martin', 'Patsy Cline', 'Diana Ross', 'Miley Cyrus'],
            correctAnswer: 'Janis Martin',
}, {

            question: 'Who sang the 1957 song Whole Lotta Shakin Goin On?',
            answers: ['Elvis Presley', 'Jerry Lee Lewis', 'Gene Vincent', 'Buddy Holly', 'Miley Cyrus'],
            correctAnswer: 'Jerry Lee Lewis',
}, {

            question: '"Rebel-Rouser", "Cannonball", and "Because They Are Young" were all hits by which artist?',
            answers: ['The Big Bopper', 'Jerry Lee Lewis', 'Gene Vincent', 'Duane Eddy', 'Miley Cyrus'],
            correctAnswer: 'Duane Eddy',
},

        {

            question: 'Who spent three weeks at No.1 in 1957 with “That’ll be the Day”?',
            answers: ['Buddy Holly', 'June Carter', 'Little Richard', 'Fats Domino', 'Miley Cyrus'],
            correctAnswer: 'Buddy Holly',
}];





    //Start  button starts game
    //clearing the content works.  Do not touch it. 
    $("#startGame").on("click", function () {
        $("#startGame").replaceWith();
        startTimer();
        decrement();
        firstQuestion();
        //renderButtons();
    })

    //this is your timer.  It is working.  Do not touch it. 
    function startTimer() {
        intervalId = setInterval(decrement, 1000);
    }

    function decrement() {
        timer--;
        $("#countdown").html("<span>" + timer + "<span>");

        if (timer === 0) {
            stopTimer();
        }
    }

    function stopTimer() {
        clearInterval(intervalId);
        nextQuestion();

    }

    function firstQuestion() {
        var randomQuestion = questionArray[Math.floor(Math.random() * questionArray.length)];
        $("#question-display").html(JSON.stringify(randomQuestion.question));
        renderButtons(randomQuestion);
    }

    function renderButtons(randomQuestion) {
        //Cleared button div of any newly created buttons
        $("#answer-display").empty();
        //dynamically generates buttons for each answer
        for (var i = 0; i < randomQuestion.answers.length; i++) {
            var a = $("<button>");
            //adds class to the button
            a.addClass("btn-answer");
            //adds a data attribute
            a.attr("data-name", randomQuestion.answers[i]);
            //labels button
            a.text(randomQuestion.answers[i]);
            //adds button to the button view div
            $("#answer-display").append(a);
        }

    }

    $("#answer-display").on("click", function(){
        console.log("clicked");


        });   


    };

Answer 1

首先，您需要设置按钮的单击处理程序。有关活动的更多信息，请访问http://api.jquery.com/on/。

我们将使用data（）访问检查结果所需的值。更多信息，请http://api.jquery.com/data/

使用委托事件实现此目的的一种方法是：

//attach click to all elements with class btn-answer inside element with id answer display
$("#answer-display").on("click", ".btn-answer", function(){
       //get answer from clicked element
       var answer = $(this).data("answer");
       //get correct answer from parent element
       var correctAnswer = $("#answer-display").data("answer");
       // correct logic
       if (answer == correctAnswer) {
           console.log("correct!!!");
       }else {
           console.log("wrong!!!");
       }
});

为了使此代码正常工作，您必须对代码进行另外两项更改：之后

$("#answer-display").empty();

添加此

$("#answer-display").data("answer", randomQuestion.correctAnswer);

这样您就可以在点击处理程序部分

中访问正确的答案

也改变了这个：

a.attr("data-name", randomQuestion.answers[i]);

到这个

a.data("name", randomQuestion.answers[i]);

更加一致。

在琐事游戏中点击按钮即可找到正确的答案

1 个答案: