Question

创建一个系统，在提交的每个错误答案中将“故障”计数器增加一个值。我这样做是让我的系统监听创建一个名为“incorrectResponse”的类。但是，它似乎只是在页面完成加载后立即添加到计数器，并且在此之后不再添加任何值。

以下是我尝试过的无效代码。

  //*-- Fault counter --*//
  if (document.querySelectorAll('incorrectResponse')) {
    $('#fault-counter').html(function(i, val) { return val*1+1 });
  };

为什么会出现这种情况？

Answer 1

假设您正在使用jQuery（您在其中一条评论中提到它），您可以做的一件事就是将事件监听器附加到您错误答案的容器中。

每当收到/附加到页面的错误答案时，手动触发自定义事件，并且事件监听器会对其做出反应，重新计算错误答案的数量并更新计数器。

＆＃13;

function updateNumberOfIncorrectMsgs() {
  $('.counter').text($('.incorrectAnswer').length);
}

updateNumberOfIncorrectMsgs();
var $container = $('.wrongAnswersContainer')
  .on('newWrongAnswerAdded', function() {
    updateNumberOfIncorrectMsgs();
  });

// The for and setTimeout is only to simulate msgs appended to the page, the important part is the custom event that gets triggered when an element is added.
for (var i = 1; i < 6; i++) {
  setTimeout(function() {
    $container
      .append('<p class="incorrectAnswer">Incorrect answer</p>')
      .trigger('newWrongAnswerAdded');
  }, 1000 * i);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Incorrect answer counter: <span class="counter"></span>
</p>
<div class="wrongAnswersContainer"></div>

＆＃13;

在创建/附加类时，将计数器的值增加1

1 个答案: