使用jQuery .each()具有动态限制的字符计数器 [英] Character Counter with a dynamic limit using jQuery .each()
问题描述
此问题是使用类的jQuery字符计数器的扩展.. >
我想在我的textarea字段中添加一个data-content="####"
,然后使用jQuery提取数值并将其应用于字符计数器限制器.
<textarea id="field1" class="input-xlarge limitChars" data-content="2000" rows="2" name="field1">
该字段的上限为2000个字符
<textarea id="field2" class="input-xlarge limitChars" data-content="1000" rows="2" name="field2">
该字段的限制为1000个字符
<textarea id="field3" class="input-xlarge limitChars" data-content="1500" rows="2" name="field3">
,这将是1500个字符.
从另一个问题的解决方案(请参阅下面的解决方案)中,我假设我需要从DOM中提取数据内容,然后将其应用于目标.我只是不知道如何从数据内容中提取价值,因此不胜感激.
$(document).ready(function(){
$(".limitChars").each(function() {
$(this).counter({
goal: 500
});
});
});
================================================ ======
随着出现的扩展对话框,我认为显示我最终得到的结果可能会有所帮助:
HTML
<textarea id="field1" class="input-xlarge" counter-limit="2000" rows="2" name="field1"> this field would have a limit of 2000 chars
JavaScript/jQuery
$("[data-counter-limit]").each(function() {
var $this = $(this), limit = +$(this).data("counter-limit");
$this.counter({
goal: parseInt(limit,10)
// goal: limit
});
});
使用 .data()
方法从data-
属性中提取值.然后使用 parseInt(string, radix)
将其转换为数字
$(document).ready(function(){
$('.limitChars').each(function() {
var self = $(this);
self.counter({
goal: parseInt(self.data('content'),10)
});
});
});
This question is an extension of jQuery Character Counter using class?.
I would like to add a data-content="####"
to my textarea field and then use jQuery to pull out the numerical value and apply that to the character counter limiter.
<textarea id="field1" class="input-xlarge limitChars" data-content="2000" rows="2" name="field1">
this field would have a limit of 2000 chars
<textarea id="field2" class="input-xlarge limitChars" data-content="1000" rows="2" name="field2">
this field would have a limit of 1000 chars
<textarea id="field3" class="input-xlarge limitChars" data-content="1500" rows="2" name="field3">
and this one would be 1500 chars.
From my other question's solution (see solution below), I'm assuming I'd need to pull out the data-content from the DOM and then apply that to the goal. I just don't know how to pull out the value from data-content and would appreciate some help.
$(document).ready(function(){
$(".limitChars").each(function() {
$(this).counter({
goal: 500
});
});
});
=====================================================
With the extended dialog that occurred, I thought it might be helpful to show what I actually ended up with:
HTML
<textarea id="field1" class="input-xlarge" counter-limit="2000" rows="2" name="field1"> this field would have a limit of 2000 chars
JavaScript/jQuery
$("[data-counter-limit]").each(function() {
var $this = $(this), limit = +$(this).data("counter-limit");
$this.counter({
goal: parseInt(limit,10)
// goal: limit
});
});
Use .data()
method to extract values from data-
attributes. Then use parseInt(string, radix)
to convert it to a number
$(document).ready(function(){
$('.limitChars').each(function() {
var self = $(this);
self.counter({
goal: parseInt(self.data('content'),10)
});
});
});
这篇关于使用jQuery .each()具有动态限制的字符计数器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!