如果单词出现在 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

这是你想要的吗？

var helloLength = $('#container:contains("Hello")').length;
if(helloLength >= 1) {
 $("#counter").text("Hello " + helloLength + " times");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="container"> Hello </div>
 <div id="counter"> Hello: /*here the number*/ times </div>

如果你想统计hello的数量，你应该使用class而不是id:像这样：

var helloLength = $('.container:contains("Hello")').length;
if(helloLength >= 1) {
 $("#counter").text("Hello " + helloLength + " times");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> Hello </div> 
 <div class="container"> Hello </div>
 <div class="container"> Random div </div> 
 <div class="container"> Hello </div>
 <div class="container"> Hello </div>

 <div id="counter"> Hello: /*here the number*/ times </div>

Answer 2

您可以通过使用正则表达式和 match() 方法查找字符串中 'Hello' 的出现次数来实现此目的。从那里您可以在 #counter 元素内的 span 上使用 text() 来显示值。试试这个：

var re = /hello/gi;
var count = ($('#container').text().match(re) || []).length;

$('#counter .count').text(count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"> Hello hello </div>
<div id="counter"> Hello: <span class="count"></span> times </div>

Answer 3

I just want to count +1 inside of a div everytime the other div contains the word Hello.

我认为这意味着您想计算单词 "Hello" 在第一个 div 中出现的次数，所以这里有一个简单的循环可以做到这一点。

// create an array out of the text of #container using spaces to delimit
var text = $('#container').text().split(" ");
var count = 0;

// loop through the array of text and check to see if each word is "Hello"
for (var i = 0; i < text.length; i++) {
  if (text[i] === "Hello") {
    count++;
  }
}  

$('#counter').text("Hello: " + count + " times");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">Hello Hello Hello Hello</div>
<div id="counter"></div>

Answer 4

您可以只使用这个简单的函数 countWords()

function countWords(str){return (str.match(/Hello/g) || []).length;;}
$('#counterValue').text( countWords($("#container").text()) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="container"> Hello and Hello but Hello is what I'm saying... last Hello!</div>
<div id="counter"> Hello: <span id="counterValue"></span> times </div>

Answer 5

使用Event delegation to handle clicks. If the user clicks on an option, then look for an associated count element and update the count. The example below uses .hasClass() to see if the element clicked on has a class name option (added to distinguish the options from other elements), parseInt() to check for a number in the count container and then 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>

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

Counter if word appears in div

html

javascript

jquery

containers

counter