0

我正在开发一个问答游戏，其中向用户展示了一个报价，并且必须猜测作者：

  function startGame(quotes) {
    askQuestion(quotes[0], 0, 0);

    function askQuestion(quote, question, score) {
      var q = "<span class='quo'>&ldquo;</span><em>" + quote.quote + "</em><span class='quo'>&rdquo;</span>";
      $('.choice').css('visibility', 'visible');
      $('#questions').html(q);
      $('.choice').click(function(e){
        $('.choice').css('visibility', 'hidden');
        e.preventDefault();
        var nextq = (question + 1);
        var btntxt = (nextq < number_of_questions ? 'Next...' : 'Final results');
        if ($(this).attr('data-author') === quote.author) {
          score++;
          $('#questions').html('<h1>Correct.</h1><a class="btn next">' + btntxt + '</a>');
          document.getElementById('win').play();
        } else {
          $('#questions').html('<h1>Wrong.</h1><a class="btn next">' + btntxt + '</a>');
          document.getElementById('lose').play();
        }
        $('#questions').append('<h4>Score: ' + score + '/' + nextq + '</h4>');
        $('.next').on("click", function(){
          question += 1;
          if (question < number_of_questions) {
            askQuestion(quotes[question], question, score);
          } else {
            tallyScore(score);
          }
        });
      });
    }
  }

当提出问题时，如果提出的问题少于 6 个，则再次调用 askQuestion() 函数。

一切都很好，但我在音效方面遇到了问题。如果用户回答正确，然后回答错误，则同时播放“赢”和“输”音效。

我的猜测是，这与我递归调用 askQuestion() 有关——似乎该函数的整个“历史”都是循环的。我之前遇到过类似的问题——在正确答案上，分数全局变量增加了以前正确答案的数量（而不是只增加一个）。

知道我该如何解决吗？谢谢！

编辑：根据要求，这是一个JSfiddle。

4

2 回答 2

1

每次调用 askQuestion 时，都会向 html 元素添加一个事件处理程序。因此，当您单击.choice元素时，会运行多个事件。

尝试为所有生成的元素提供一个唯一的 id，并使用该 id 来附加事件处理程序。

于 2013-07-31T15:44:18.447 回答
1

实际上很容易修复。您一遍又一遍地重新附加点击侦听器，因此每次设置时只需将其删除。

改变

  $('.choice').click(function (e) {

至

  $('.choice').off().click(function (e) {

http://jsfiddle.net/NADYM/

于 2013-07-31T15:43:47.663 回答