Question

我在stackoverflow中检查了解决方案，但在尝试了几整页结果后，我想我只是问;）

萨姆式： 我有一个迷你游戏，当点击列表中的项目时，我提供提示。列表中会有一堆项目，但它们只能使用3个提示。文本将从“你有3个提示”变为“2个提示”然后“0提示”当他们使用所有提示并得到零时，不应计算任何其他内容，并且提示文本下的指示应该改变。

我的工作： 我有一个计数器，当点击列表中的项目并且“你有X提示”更新时，它从3开始倒计时。

我需要帮助： 计数器不会停在零，如果oyu继续点击列表项，它只会继续下降到负数。如何将其停止为零并禁用计数器？

路线段落只应在达到零时更改，但在首次点击后显示。我怎么才让它显示为零？

感谢您的帮助！这是我的小提琴：http://jsfiddle.net/gudinne/ophyfd8t/2/

以下代码：

JS

var counter = 3;

$('.itemList li').on('click', function () {
  counter--;

  if (counter == 0) {
      $('.xHints').html(counter + ' Hints');
  } else {
      $('.xHints').html(counter + ' Hints');
      $('.directions').html('New directions');
  }
})

HTML

<div class="itemWrapper">
   <ul class="itemList">
       <li>cat</li>
       <li>mouse</li>
       <li>cheese</li>
  </ul>
  <div id="hintBox"> <span class="youHave">You Have</span>
<span class="xHints">3 Hints</span>

    <p class="directions">Use a hint by clicking on a name in the list.</p>
  </div>

Answer 1

在递减计数器之前，您需要检查计数器是否已经达到零。您还可以稍微简化一下代码：

if(counter > 0) {
    counter--;

    if(counter == 0)
        $('.directions').html('New directions');

    $('.xHints').html(counter + ' Hints');
}

Answer 2

您需要等于或小于零。因为计数器可以低于零。

var counter = 3;

$('.itemList li').on('click', function () {
  counter--;

  if (counter <= 0) {
      // This will occur once counter reaches zero, or negative numbers
      $('.xHints').html(counter + ' Hints');
      // If you don't want counter to go below zero, you could reset counter = 1 here 
      counter = 1;
  } else {
      // This will occur for all times counter is above 0
      $('.xHints').html(counter + ' Hints');
      $('.directions').html('New directions');
  }
})

jQuery计数器停止在零，如果零显示替换HTML

2 个答案: