个人中心
gpt4 book ai didi

javascript - 在 jQuery/javaScript 中迭代对象数组(时间相关迭代)

转载 作者：行者123 更新时间：2023-11-28 01:11:13 25 4
gpt4 key购买 nike

我是 javaScript 和 jQuery 的初学者。我想创建一个只有两个选项的问答游戏。

我有一个如下所示的对象数组:

  var question = [];

    question[0] = {

        value: "someText here",
        ans: true
    };

我将把我所有的问题写成这个对象的数组。这是一个纯粹基于乐趣的游戏，因此如果用户打开源代码并阅读问题，就不会有任何问题。我想用 jQuery 来展示这个问题。为了展示，我写了这个:

$("#someID").text(question[i].value); // where i is some random variable

然后我可以调用 .click 方法并检查用户单击了哪个按钮，然后相应地处理情况(更改分数、减少生命等)。现在，我想根据时间迭代这个对象数组，这意味着每个问题在屏幕上保留 15 秒左右，如果用户按下两个按钮中的任何一个，则下一个问题立即出现，其他参数是相应地改变了。但是，如果用户 15 秒内未按任何按钮，则应出现下一个问题。我怎样才能做到这一点？

在发布这个问题之前我付出的努力:

Adding a Quiz Timer, Fade Out/Skip to the next if timer reaches 0

此链接上的第一个答案告诉我一些接近我想要实现的目标，但它将其数据放在 <p> 中标签，我不想要这个。我严格希望将其保留为对象数组。有什么方法可以实现这一点吗？非常感谢。

编辑------

score=0; // variable to store the score of the user.
counter=0;



$(function () {
    fetchNextQuestion(); 

});

function fetchNextQuestion() {

    counter++;
    if (counter >= 5) {
        endTheGame();
    }
    else {

        number = Math.floor(Math.random() * 10);
        $("#timer").text(question[number].value);
        _qtimer = setInterval(fetchNextQuestion(), 15000);
        userHasDoneSomething();
    }
}

function userHasDoneSomething() {

    $("#true").click(function () {
        clearInterval(_qtimer);
        if (question[number].ans === true) {
            score++;
        }
        else {
            score--;
        }

        fetchNextQuestion();
    });

    $("#false").click(function () {
        clearInterval(_qtimer);
        if (question[number].ans === false) {
            score++;
        }
        else {
            score--;
        }
        fetchNextQuestion();
    });


    return;



}



function endTheGame() {
    alert("The game has ended! Your score is "+ score);
}

不幸的是，这段代码对我不起作用。它只是给了我一个警报框，屏幕上的问题没有改变。我错了有什么原因吗？注意:Web 控制台中没有错误。

编辑 #2---这是我的 HTML..

<!DOCTYPE html>
<html>
<head>
    <title>Serious or Joking</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="timer">
        <p>00</p>
    </div>


    <input type="button" value="true" class="answer" id="truebutton" />
    <input type="button" value="false" class="answer" id="falsebutton"/>


</body>
</html>

我在 Visual Studio 中工作。

最佳答案

据我了解，你只需要一个间隔..

编辑:这是使用您的代码进行的更新:

var score=0, // variable to store the score of the user.
    counter=0;
    $(function () {
        fetchNextQuestion(); 
    });

    function fetchNextQuestion() {
        counter++;
        if (counter >= 5) {
            endTheGame();
        }
        else {
            number = Math.floor(Math.random() * 10);
            $("#timer").text(question[number].value);
            _qtimer = setInterval(fetchNextQuestion, 15000);
            $(".answer").off().on('click', userHasDoneSomething);
        }
    }

    function userHasDoneSomething() {
        clearInterval(_qtimer);
        if (Boolean(question[number].ans) == Boolean(this.value))    score++;
        else                                    score--;

        fetchNextQuestion();
    }
    function endTheGame() {
        alert("The game has ended! Your score is "+ score);
    }

注意:为 #true 和 #false 元素指定相同的类 (.answer)

关于javascript - 在 jQuery/javaScript 中迭代对象数组(时间相关迭代)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24404828/

25 4 0
文章推荐： html - 雅虎在 td 上将宽度更改为最小宽度
文章推荐： boost::filesystem 的 C++ 链接错误
文章推荐： c++ - 我想为其中一个类的某些内部结构制作一个包装的访问类型，我有一些性能问题
文章推荐： javascript - 自动将SCORM数据发送到LMS
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com