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

时间:2017-01-05 15:20:42

标签: javascript jquery html containers counter

首先看一下我的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

感谢您的帮助&对不起我最新的问题,没有人理解大声笑

5 个答案:

答案 0 :(得分:2)

这是你想要的吗?

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>

答案 1 :(得分:2)

使用Event delegation来处理点击次数。如果用户单击某个选项,则查找关联的count元素并更新计数。下面的示例使用.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>

答案 2 :(得分:1)

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

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

$('#counter .count').text(count);
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

  

我只想在div内部计算+1,而另一个div包含单词Hello。

我认为这意味着你要计算这个词的次数&#34;你好&#34;在第一个div中,所以这是一个简单的循环。

&#13;
&#13;
// 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");
&#13;
<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>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

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

&#13;
&#13;
function countWords(str){return (str.match(/Hello/g) || []).length;;}
$('#counterValue').text( countWords($("#container").text()) );
&#13;
<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>
&#13;
&#13;
&#13;