为什么我隐藏图像的功能无法正常工作?

时间:2019-04-14 04:03:33

标签: javascript jquery function onclick hide

在我决定进行小幅更改之前,我的代码正常工作,并且我想我不小心删除了一些内容,因为控制台已经说过,当我已经定义隐藏图像时,隐藏图像未按递减定义。我找不到错误,一切正常:'(.。我遍历了隐藏图像函数,似乎一切都正确。当我将其加载到html上时,当用户未进行选择时,该错误似乎出现了函数递减,因此当时间到达零时,它将显示具有正确答案的图像,并用于清除图像并显示具有可用选项的下一个问题,但是现在它仅停留在if time = 0屏幕上,并且不会继续下一个问题。

  $(document).ready(function () {
    //set up object-array for questions
    var trivia = [
        {
            question: "On Drake & Josh, what's Megan favorite phrase?'",
            choices: ["Boobz", "Idiots", "Oh, really?", "Damn! Where are my 
    apples?"],
            rightChoice: 0,
            image: "assets/images/boobs.gif",
            background: "<img src='assets/images/90back.jpg'>"
        },
        {
            question: "What color lipstick does Spongebob use when he kisses 
    Mr. Krabs fake Millionth dollar?",
            choices: ["Magenta", "Stardust", "Coral Blue #Oof", "Blorange"],
            rightChoice: 2,
            image: "assets/images/spongebob-coral-blue.gif",
            background: "<img src='assets/images/90cart.jpg'>"
        },
        {
            question: "What thottie accessory was popular in the 90's, that 
    is currently popular today?",
            choices: ["chokers", "bandaids", "airpods", "tidepods"],
            rightChoice: 0,
            image: "assets/images/chokers.gif",
            background: "<img src='assets/images/90back.jpg'>"
        },
        {
            question: "During sleepovers, Mystery Date allowed girls to date 
    which sexy actor?",
            choices: ["Port", "James Franco", "Paul Rudd", "Chris Evans, Mr. 
    America"],
            rightChoice: 3,
            image: "assets/images/chris-evans.gif",
            background: "<img src='assets/images/90cart.jpg'>"
        },
        {
            question: "What was the SPICIEST band in the 90's?",
            choices: ["Madonna", "Hillary Clinton", "BackStreet Boyz", "The 
    Spice Girls"],
            rightChoice: 3,
            image: "assets/images/zig-a-zig-ha.gif",
            background: "<img src='assets/images/90back.jpg'>"
        }
    ];
    var rightAnswer = 0;
    var wrongAnswer = 0;
    var unansweredCount = 0;
    var time = 15;
    var intervalId;
    var userSelection = "";
    var selected = false;
    var running = false;
    var totalCount = trivia.length;
    var chosenOne;
    var triviaRand;
    var newArray = [];
    var placeHolder = [];

    //hide resetBtn until called
    $("#resetBtn").hide();
    //click startBtn button to start game
    $("#startBtn").on("click", function () {
        $(this).hide();

        displayTrivia();
        runTime();
        for (var i = 0; i < trivia.length; i++) {
            placeHolder.push(trivia[i]);
        };

    })
    //time: run
    function runTime() {
        if (!running) {
            intervalId = setInterval(decrement, 1000);
            running = true;
        }
    }
    //time--
    function decrement() {
        $("#timeLeft").html("<h4> Madonna, we're running out of time  " 
    + time + " </h4>");
        time--;

        //stop time if reach 0
        if (time === 0) {
            unansweredCount++;
            stop();
            $("#choicesDiv").html("<p>Oh no! You ran out of time . The 
    correct choice is: " + chosenOne.choices[chosenOne.rightChoice] + " 
   </p>");
            hideimage();
        }
    }

    //time stop
    function stop() {
        running = false;
        clearInterval(intervalId);
    }
   play question and loop though and display possible answers
    function displayTrivia() {
        //generate random triviaRand in array
        triviaRand = Math.floor(Math.random() * trivia.length);
        //console.log(triviaRand);
        chosenOne = trivia[triviaRand];
        console.log(chosenOne);

        $("#questionDiv").html("<h2>" + chosenOne.question + "</h2>");
        for (var i = 0; i < chosenOne.choices.length; i++) {
            var newUserChoice = $("<div>");
            newUserChoice.addClass("answerChoices");
            newUserChoice.html(chosenOne.choices[i]);
            //assign array position to it so can check rightChoice
            newUserChoice.attr("userChoices", i);
            $("#choicesDiv").append(newUserChoice);
        }

        //click function to select rightChoice
        $(".answerChoices").click(function () {
            //parseInt() function parses a string argument and returns an 
    integer of the specified radix
            //locate array based on userChoice
            userSelection = parseInt($(this).attr("userChoices"));
            console.log(userSelection);
            if (userSelection === chosenOne.rightChoice) {
                console.log(chosenOne.choices[chosenOne.rightChoice]);
                stop();
                selected = true;
                rightAnswer++;
                userSelection = "";
                $("#choicesDiv").html("<p>Damn, boi ‍</p>");
                hideimage();
                console.log(rightAnswer);
            } else {
                stop();
                selected = true;
                wrongAnswer++;
                userSelection = "";
                $("#choicesDiv").html("<p>That is incorrect! The correct 
    choice is: " + chosenOne.choices[chosenOne.rightChoice] + "</p>");
                hideimage();
                console.log(wrongAnswer);
            }
        })

        function hideimage() {
            $("#choicesDiv").append("<img src=" + chosenOne.image + ">");
            newArray.push(chosenOne);
            trivia.splice(triviaRand, 1);

            var hideimg = setTimeout(function () {
                $("#choicesDiv").empty();
                time = 15;

                //run the score screen if all questions answered
                if ((wrongAnswer + rightAnswer + unansweredCount) === 
    totalCount) {
                    //clearbck();
                    $("#questionDiv").empty();
                    $("#questionDiv").html("<h3> Game Over!  Let's see 
    your score : </h3>");
                    $("#choicesDiv").append("<h4>  Correct: " + 
    rightAnswer + "</h4>");
                    $("#choicesDiv").append("<h4>  Incorrect: " + 
    wrongAnswer + "</h4>");
                    $("#choicesDiv").append("<h4>  Unanswered: " + 
    unansweredCount + "</h4>");
                    $("#resetBtn").show();
                    rightAnswer = 0;
                    wrongAnswer = 0;
                    unansweredCount = 0;

                } else {
                    runTime();
                    displayTrivia();

                }
            }, 2000);


        }

        $("#resetBtn").on("click", function () {
            $(this).hide();
            $("#choicesDiv").empty();
            $("#questionDiv").empty();
            for (var i = 0; i < placeHolder.length; i++) {
                trivia.push(placeHolder[i]);
            }
            runTime();
            displayTrivia();

        })

    }
    })` 

1 个答案:

答案 0 :(得分:0)

就像语法错误更正!您应该在hideimage函数中img标签的src属性中使用单引号或双引号:

$("#choicesDiv").append("<img src=' " + chosenOne.image + " '>");