使用js修改测试计数器

Question

我目前正在开发一款智力竞赛应用程序。简单的多选项测验，运行良好，出现问题，开始倒计时。。最后显示分数。现在我想为玩家添加一些"助推器"来增强游戏效果，所以我从"时间助推器"开始，它必须允许为玩家添加额外的时间，这是计数器类：

<script type="application/javascript">
var myCountdownTest = new Countdown({
  time: 60, 
  width:200, 
  height:80, 
  rangeHi:"minute"
 });
 </script>

所以我添加了一个名为"添加时间！"的按钮

<button id='<?php echo $i;?>' class='time btn btn-success' type='button' >Add time!</button>

比方说，我希望一旦点击按钮，计时器就会获得+20秒，所以我写道：

$(document).on('click','.time',function() {
  myCountdownTest.time=myCountdownTest.time+20;  
});

但那没用，我在这里缺少什么？附言：我希望这个按钮可以点击一次，这样玩家就可以使用这个助推器一次，然后按钮被锁定。

Answer 1

也许我错了，但我喜欢这里：

$(document).on('click','.time',function(){
myCountdownTest.time=myCountdownTest.time+20;  
});

您正在将clik事件附加到整个文档中。试着做同样的事情，但在按钮上：

$("#<?php echo $i; ?>").on('click','.time',function(){
myCountdownTest.time=myCountdownTest.time+20;  
$(this).unbind( "click" );
});

取消绑定行将取消连接按钮上的clic事件，它将不再可单击。

Answer 2

来自new Countdown的返回没有暴露time属性，而是具有bx.time属性。也许你可以试试。。。

$(document).on('click','.time',function(){
  myCountdownTest.bx.time=myCountdownTest.bx.time+20;  
});

我不确定这是否是正确的方法，因为我不知道库的api，但这应该解释为什么它没有按照你的期望进行。

---

更新：如果初始化后没有API更新时间。。。

有点残酷，但你可以尝试用更新的时间参数重新初始化对象。。。

$(document).on('click','.time',function(){
  myCountdownTest = new Countdown({
                            time: myCountdownTest.bx.time+20, 
                            width:200, 
                            height:80, 
                            rangeHi:"minute"
                            });
});