Question

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

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

这是jsfiddle：http://jsfiddle.net/gudinne/ej4mLoze/

感谢任何指导！

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

HTML

<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>

CSS

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

Answer 1

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

添加

    $(this).off();

在您的减量计之上或之下。

的jsfiddle： http://jsfiddle.net/ej4mLoze/2/

警告：TrueBlueAussie的回答可以让你生成一个工具提示，让用户知道它已被点击。如果您不关心这一点，这可能是更简单的解决方案。

Answer 2

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

http://jsfiddle.net/TrueBlueAussie/ej4mLoze/1/

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

我将事件处理程序更改为委托事件处理程序，以便选择（即not(.used)）将在事件时发生（而不是在事件注册时）。

根据评论进行更新：

如果你想保留提示，但不减少计数器，你可以在决定减少时简单地测试一个类的存在：

e.g。 http://jsfiddle.net/TrueBlueAussie/ej4mLoze/3/

$('.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");
});

jquery计数器 - 允许多次点击li但只计算一次

2 个答案: