零jQuery的計數器停止，如果零節目取代HTML

Question

我在計算器檢查解決這一點，但嘗試的結果幾個整頁之後，我想我只是問;）

總和向上： 我有一個迷你遊戲，當點擊一個列表上的項目時，我會提供提示。列表上會有一堆物品，但他們只能使用3個提示。文本將從「你有3個提示」改變爲「2提示」，然後是「0提示」。當他們使用所有提示並且歸零時，沒有別的東西應該被計數，並且提示文本下的方向應該改變。

我所工作： 我有一個點擊列表中的某個項目時從3倒計時計數器和「你有X提示」更新。

我需要什麼幫助： 計數器爲零不會停止，它只是不斷下降爲負數，如果奧尤不斷地點擊列表中的項目。我如何將它停止爲零並禁用計數器？

方向段落只應在零到達時纔會更改，但在第一次點擊後會顯示。我怎樣才能讓它顯示爲零？

感謝您的幫助！ 這裏是我的小提琴：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'); 
    } 
})