如果单词出现在 div 中,则计数器 [关闭]

Posted

技术标签:

【中文标题】如果单词出现在 div 中,则计数器 [关闭]【英文标题】:Counter if word appears in div [closed] 【发布时间】:2017-05-20 04:54:03 【问题描述】:

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

感谢您的帮助,对于我最近没有人理解的问题,我深表歉意,哈哈

【问题讨论】:

【参考方案1】:

使用Event delegation 处理点击。如果用户单击一个选项,则查找关联的计数元素并更新计数。下面的示例使用.hasClass() 来查看点击的元素是否有一个类名option(添加以区分选项与其他元素),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>

【讨论】:

对不起,我这么晚了..在医院哈哈..谢谢你 我不知道为什么这个问题被关闭了。我很感谢你及时回复 它可能已关闭,因为您的问题不包括“特定问题或错误” - 它确实有一个指向 jsFiddle 的链接和一个问题“How这样做?”,但这不是一个非常具体的问题,并且可能不会帮助碰巧看到您的问题的其他人。如果是像this one 这样的特定问题,那么它可能不会被关闭 确实是具体问题,居然还有例子? 我应该更清楚一点:您的帖子没有“明确的问题陈述”,因此对其他读者并没有真正的用处。来自What topics can I ask page - “如果您的问题通常涵盖...特定的编程问题,或者...那么您来对地方提问了!”但是,“How to do this?”并未涵盖特定编程问题。【参考方案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>

【讨论】:

没有看到您的代码,我无法帮助您完成游戏。但是,如果您想用 Hello (或任何您想要的)计算 div 的数量,您可以使用我的答案。如果您想要更详细的答案,您应该在您的问题中添加更多详细信息 @LorisVonlanthen 你应该编辑这个 请看编辑 这不是编辑,这是一个完全不同的问题!如果您想问其他问题,我建议您恢复编辑和一个新问题。尽管还要注意您的新问题过于广泛。你之前的很好,只是需要澄清一下你想要达到的结果 @RoryMcCrossan 我想问这​​个,但我完全搞砸了我的最新问题【参考方案3】:

您可以通过使用正则表达式和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>

【讨论】:

请看编辑【参考方案4】:

每当另一个 div 包含单词 Hello 时,我只想在 div 内计数 +1。

我认为这意味着您要计算单词“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>

【讨论】:

请看编辑【参考方案5】:

你可以使用这个简单的函数 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>

【讨论】:

请看编辑

以上是关于如果单词出现在 div 中,则计数器 [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

如何获取所有文件中出现的单词?但是每个目录的单词计数而不是单个数字

计算每个单词在文件中出现的次数

在有和没有大小写的情况下对数组中的相似单词进行计数[关闭]

一篇英文文档中找出频数最多的10个单词

从字文件中的一个字节计数页面[] [关闭]

css设置某个选择器出现次数的计数器并输出