Javascript jquery计数器-允许多次单击li，但只计算一次

我正在制作一个迷你游戏，就像一个隐藏的物体。我是jQuery的新手。 我有一个在页面上表示图像的项目列表。当需要提示来查找项目时，可以单击列表项目，它将启动动画以显示同名对象的位置。有一个计数器可以提示3个提示。这一切都有效

我遇到的问题是，如果你多次单击同一个列表项，它会用尽这三个提示。如何让计数器只对每个列表项计数一次？因此，换句话说，您可以多次单击列表中的同一项，但这只会将计数器减少一次。然后，如果单击其他列表项，计数器将再次减少1

以下是JSFIDLE：

谢谢你的指导

JS

// hintCounter of 3 counts down to 0 and changes behaviors
var hintCounter = 3;

$('.itemList li').on('click', function () {
   // check if has hints
   if (hintCounter > 0) {
       hintCounter--;

$('.xHints').html(hintCounter + ' Hints');
   } else {
       // else show the message out of hints
       $('.directions').html('Sorry you are all<br /> out of hints. <br />Keep Searching!');
   }
});

---

您可以简单地添加一个类来告诉它们何时被使用（这也意味着您可以相应地设置它们的样式）：

我将事件处理程序更改为委托事件处理程序，以便选择（即

未（.used）

）将在事件发生时发生（而不是在注册事件时发生）

根据评论更新：

如果希望保留提示，但不减少计数器，则可以在决定减少计数器时简单地测试是否存在类：

e、 g

$（'.itemList'）。在（'click'，'li'，函数（）{
//检查是否有提示
如果（hintCounter>0）{
if（！$（this.hasClass（“已使用”））{
辛特计数器--；
}
$（'.xHints'）.html（hintCounter+'Hints'）；
}否则{
//否则，显示提示以外的消息
$（'.directions'）.html（'很抱歉，你们都没有提示。
继续搜索！'）；
}
$（此）.addClass（“已使用”）；
});

单击该链接时，您可以尝试删除该链接上的侦听器

加

高于或低于你的减量器

jsfiddle：

---

警告：TrueBlueAusie的答案可以让你生成一个工具提示，让用户知道它已经被点击了。如果您对此不感兴趣，这可能是更简单的解决方案。

感谢您的快速响应！这很好，因为它只允许每个项目在计数器中注册一次，但如何允许对每个项目进行多次单击，但只允许在计数器中注册一次？假设他们错过了提示动画，需要再次查看它，以便他们可以根据需要多次单击列表中的“棒球”单词，但它只会注册一次？不确定这是否可能，但这将有利于比赛。谢谢@用户826345：很简单。只需测试hasClass（“used”），看看是否增加计数器。哦！太棒了！当你这样解释它时，它看起来很简单：）谢谢你的解释和例子。非常有帮助！正如您从更新的需求（来自OPs评论）中所看到的，simpler并不总是合适的（感谢您的提及）：）嘿，pjc，谢谢您提供了一个答案。虽然这并不是我在这个问题上所需要的，但我可以看到它在我遇到的另一个问题上的作用+1.

<div class="itemWrapper">
<ul class="itemList">
    <li class="baseball">Baseball</li>
    <li class="bacon">Bacon</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>

 .itemWrapper {
   border: 2px solid;
   width: 400px;
   height: 271px;
   white-space: normal;
   position: relative;
 }
 .itemList {
   margin: 0;
   padding: 45px 55px;
 }
 .itemList li {
   list-style-type: none;
   position: relative;
   cursor: pointer;
   text-transform: uppercase;
   font-size: 20px;
   text-align: center;
 }
 #hintBox {
   width: 300px;
   margin: 0 auto;
   text-align:center;
   color: blue;
 }
 .xHints {
   font-weight: bold;
 }

$('.itemList').on('click', 'li:not(.used)', function () {
    $(this).addClass("used");

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

    // check if has hints
    if (hintCounter > 0) {
        if (!$(this).hasClass("used")) {
            hintCounter--;
        }

        $('.xHints').html(hintCounter + ' Hints');
    } else {
        // else show the message out of hints
        $('.directions').html('Sorry you are all<br /> out of hints. <br />Keep Searching!');
    }
    $(this).addClass("used");
});

    $(this).off();