1

这个问题是jQuery Character Counter using class 的扩展？.

我想data-content="####"在我的 textarea 字段中添加一个，然后使用 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
      });
});
4

2 回答 2

2

使用.data()方法从data-属性中提取值。然后用于parseInt(string, radix)将其转换为数字

$(document).ready(function(){
    $('.limitChars').each(function() {
        var self = $(this);
        self.counter({
            goal: parseInt(self.data('content'),10)
        });
    });
});
于 2012-12-19T21:51:10.447 回答
1

您可以删除类名limit500并直接仅使用data-*属性，data-counter-limit. 它比同时使用更清洁。

<textarea data-counter-limit="1000">


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

选择器[data-counter-limit]将获取所有具有属性的元素data-counter-limit。剩下的就是解析限制和应用处理元素的问题。

于 2012-12-19T21:53:30.133 回答