Question

我是一个使用JavaScript进行项目的日语研究生实验，我尝试创建的第一件事就是基于JavaScript的简单FlashCard游戏。

它基本上生成一个随机数组，并使用这个随机数用div填充div有6个可能的选择使用jQuery。然后它随机选取一个数字的所述数组并使其成为正确的选择。最后，它读取用户选择（使用jQuery文本方法）并根据它执行预期输出。

闪卡几乎运行良好。问题是，当if语句返回true时，变量pontos（points）有时会被加总两次。我真的不知道为什么。我还注意到，即使select文本为false，脚本也会调用函数jogar()。

由于我真的不熟悉编程，我想事先为凌乱的代码道歉，以及我最喜欢的业余错误。

你们中的任何人都会这么善良并帮助我解决这个问题吗？

    var hiragana, jogar, romaji, pontos;
pontos = 0;

hiragana = ["あ", "か", "さ", "た", "な", "は", "ま", "や", "ら", "わ", "ん", "い", "き", "し", "ち", "に", "ひ", "み", "り", "う", "く", "す", "つ", "ぬ", "ふ", "む", "ゆ", "る", "え", "け", "せ", "て", "ね", "へ", "め", "れ", "お", "こ", "そ", "と", "の", "ほ", "も", "よ", "ろ", "を"];

romaji = ["A", "Ka", "Sa", "Ta", "Na", "Ha", "Ma", "Ya", "Ra", "Wa", "N", "I", "Ki", "Shi", "Chi", "Ni", "Hi", "Mi", "Ri", "U", "Ku", "Su", "Tsu", "Nu", "Fu", "Mu", "Yu", "Ru", "E", "Ke", "Se", "Te", "Ne", "He", "Me", "Re", "O", "Ko", "So", "To", "No", "Ho", "Mo", "Yo", "Ro", "Wo"];



jogar = function() {
    var arr, kpergunta, correto_secreto, found, hiragana_1, hiragana_2, hiragana_3, hiragana_4, hiragana_5, hiragana_6, i, pergunta, randomnumber, pontuacao;
    $("div.kana").css("color", "white");
    pontuacao = "Acertos: " + pontos;
    $("#pontuacao").html(pontuacao);
    arr = [];
    while (arr.length < 6) {
        randomnumber = Math.floor(Math.random() * hiragana.length);
        found = false;
        i = 0;
        while (i < arr.length) {
            if (arr[i] === randomnumber) {
                found = true;
                break;
            }
            i++;
        }
        if (!found) {
            arr[arr.length] = randomnumber;
        }
    }
    hiragana_1 = "<h2>" + hiragana[arr[0]] + "</h2>";
    $("#kana1").html(hiragana_1);
    hiragana_2 = "<h2>" + hiragana[arr[1]] + "</h2>";
    $("#kana2").html(hiragana_2);
    hiragana_3 = "<h2>" + hiragana[arr[2]] + "</h2>";
    $("#kana3").html(hiragana_3);
    hiragana_4 = "<h2>" + hiragana[arr[3]] + "</h2>";
    $("#kana4").html(hiragana_4);
    hiragana_5 = "<h2>" + hiragana[arr[4]] + "</h2>";
    $("#kana5").html(hiragana_5);
    hiragana_6 = "<h2>" + hiragana[arr[5]] + "</h2>";
    $("#kana6").html(hiragana_6);

    kpergunta = arr[Math.floor(Math.random() * arr.length)];
    correto_secreto = hiragana[kpergunta];

    pergunta = "<h2>" + "Escolha o kana correto:" + " " + romaji[kpergunta] + "</h2>";
    $("#correto").html(pergunta);

    $("div.kana").click(function() {
        var text, id, correto;
        id = $(this).attr('id');
        text = $(this).text();
        if (text === correto_secreto) {
            $("#" + id).css("color", "green");
            pontos += 1;
            setTimeout(jogar, 1000);
        } else {
            $("#" + id).css("color", "red");
        }
    });
};

Answer 1

你可能想试试这个：将div.cana点击功能订阅放在jogar之外。如果这可以解决您的问题，请告诉我。感谢

jogar = function() {
    var arr, kpergunta, correto_secreto, found, hiragana_1, hiragana_2, hiragana_3, hiragana_4, hiragana_5, hiragana_6, i, pergunta, randomnumber, pontuacao;
    $("div.kana").css("color", "white");
    pontuacao = "Acertos: " + pontos;
    $("#pontuacao").html(pontuacao);
    arr = [];
    while (arr.length < 6) {
        randomnumber = Math.floor(Math.random() * hiragana.length);
        found = false;
        i = 0;
        while (i < arr.length) {
            if (arr[i] === randomnumber) {
                found = true;
                break;
            }
            i++;
        }
        if (!found) {
            arr[arr.length] = randomnumber;
        }
    }
    hiragana_1 = "<h2>" + hiragana[arr[0]] + "</h2>";
    $("#kana1").html(hiragana_1);
    hiragana_2 = "<h2>" + hiragana[arr[1]] + "</h2>";
    $("#kana2").html(hiragana_2);
    hiragana_3 = "<h2>" + hiragana[arr[2]] + "</h2>";
    $("#kana3").html(hiragana_3);
    hiragana_4 = "<h2>" + hiragana[arr[3]] + "</h2>";
    $("#kana4").html(hiragana_4);
    hiragana_5 = "<h2>" + hiragana[arr[4]] + "</h2>";
    $("#kana5").html(hiragana_5);
    hiragana_6 = "<h2>" + hiragana[arr[5]] + "</h2>";
    $("#kana6").html(hiragana_6);

    kpergunta = arr[Math.floor(Math.random() * arr.length)];
    correto_secreto = hiragana[kpergunta];

    pergunta = "<h2>" + "Escolha o kana correto:" + " " + romaji[kpergunta] + "</h2>";
    $("#correto").html(pergunta);

};

 $("div.kana").click(function() {
        var text, id, correto;
        id = $(this).attr('id');
        text = $(this).text();
        if (text === correto_secreto) {
            $("#" + id).css("color", "green");
            pontos += 1;
            setTimeout(jogar, 1000);
        } else {
            $("#" + id).css("color", "red");
        }
    });

Answer 2

有两个原因：首先，如果有人双击某个项目，他们会获得两分。这是因为，在他们点击了正确的项目一次之后，他们仍然可以再次点击它（或者更多次，如果他们快速点击）。

第二个原因是真正的问题。每次调用jogar时，都会向其添加click处理程序。因此，单击一次就可以多次调用click处理程序。添加点击处理程序的次数越多，您将看到的重复项就越多。

因为您使用的是JQuery，所以只需使用jquery.one()代替click就可以解决问题，一切都会按预期运行：https://api.jquery.com/one/

JavaScript - 变量随机变化

2 个答案: