javascript - 如果单词出现在 div 中则计数器

Question

看看我的jsfiddle第一的。 现在，我想每次剪刀、石头和布出现在 div #myChoice 中时创建一个计数器。 我必须这样做......所以没有其他方法，比如请点击任何内容。

如何做到这一点？

 if "Rock" appears in the div #myChoice
 -> Rock Count: 1
 -> Paper Count: 0
 -> Scissor Count: 0

 if "Scissor" appears in the div #myChoice
 -> Rock Count: 1
 -> Paper Count: 0
 -> Scissor Count: 1

 if "Rock" appears in the div #myChoice AGAIN
 -> Rock Count: 2
 -> Paper Count: 0
 -> Scissor Count: 1

感谢您的帮助，对于我最新的问题感到抱歉，没有人理解哈哈

Answer 1

使用Event delegation来处理点击。如果用户单击某个选项，则查找关联的计数元素并更新计数。下面的示例使用 .hasClass()查看单击的元素是否具有类名选项(添加以区分选项与其他元素)，parseInt()检查计数容器中的数字，然后 isNaN()检查计数是否确实是一个数字(与空字符串不同)。

$(document).ready(function() {
  $(document).click(function(event) {
    if ($(event.target).hasClass('option')) {
      $('#myChoice').text(event.target.innerText);
      var countElement = $('#' + event.target.id + 'Count');
      if (countElement.length) {
        var count = parseInt(countElement.text(), 10);
        if (isNaN(count)) {
          count = 0;
        }
        countElement.text(++count);
      }
    }
  });
});

#myChoice {
  width: 100px;
  height: 20px;
  border: 1px solid black
}
li {
  width: 50px;
  border: 1px solid black;
  padding: 3px;
  margin-bottom: 5px
}
li:hover {
  background-color: gainsboro;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div id="scissor" class="option">Scissor</div>
  </li>
  <li>
    <div id="rock" class="option">Rock</div>
  </li>
  <li>
    <div id="paper" class="option">Paper</div>
  </li>
</ul>
<br />
<div id="myChoice">
</div>
<br />

<div id="counter">
  <p>Scissor Count:
    <span id="scissorCount"></span>
  </p>
  <p>Rock Count:
    <span id="rockCount"></span>
  </p>
  <p>Paper Count:
    <span id="paperCount"></span>
  </p>
</div>