时间戳

首页 > 解决方案 > jQuery - 匹配具有相同数据的元素

jquery - jQuery - 匹配具有相同数据的元素

问题描述

当您在每个 textarea 中键入以使用相同数据重新调整 span 中剩余的字符时，我喜欢将 textarea 数据与 span 数据匹配

如何匹配它们？

html

 <span data-lang="gb"></span>
<textarea data-lang="gb"></textarea>

<span data-lang="en"></span>
<textarea data-lang="en"></textarea>

jQuery

 $('textarea').each(function(){
  var lang = $(this).data('lang');
  $(this).keyup(function(){
    if (this.value.length > 50) {
      return false;
    }
    $('span').html("(characters left: " +(50 - $(this).val().length) + " )");
  });
});

标签： jquery

解决方案

您可以在文本区域中创建一个数据属性，告诉它什么是计数器元素，并使用它来选择和更新计数器。

像这样：

$("[data-counter]").on('input', function (e) {
  var counter = $(this).data('counter');
  var $counter = $(counter);
  var maxlength = parseInt($(this).attr('maxlength'));
  var count = $(this).val().length;
  $counter.text('Characters left: ' + (maxlength - count));
}).trigger('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="mytext" data-counter="#mytextcounter" maxlength="50"></textarea>
<span id="mytextcounter"></span>

推荐阅读