2016-11-18 44 views
1

创建一个在提交错误答案时将“故障”计数器值增加1的系统。我通过让我的系统倾听创建一个名为“incorrectResponse”的类来做到这一点。但是,只要页面加载完成,它就会立即添加到计数器中,并且在此之后不会再添加任何值。创建课程时将计数器的值增加一个/追加

这是我试过的代码不工作的代码。

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

为什么会出现这种情况?

+1

_I'm通过让我听系统出于对建立一个class_的这样做呢? –

+0

@Maximus指出,你的事件监听器在哪里? –

+1

'incorrectResponse'或'.incorrectResponse' –

回答

1

假设你使用的是jQuery(你在其中一个注释中提到它),你可以做的一件事是将一个事件监听器附加到你的“错误答案”的容器中。

任何时候收到/附加到页面上的错误答案都会被手动触发自定义事件,并且事件侦听器会对它作出反应重新计算错误答案的数量并更新计数器。这里是监听的代码 -

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); 
 
}
<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>

+1

这很好,我能够修改这段代码来得到我需要的结果。真的很欣赏这一次伴侣的时间! Upvoted! :) –

+0

不客气,很高兴它帮助你:) – acontell