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

Question

当您键入每个文本区域以使用相同的数据重新调整跨度中剩余的字符时，我喜欢将文本区域数据与范围数据相匹配

如何匹配它们？

.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) + " )");
});
});

Answer 1

你非常接近这一点：

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

例如，您可以在此处看到，您可以按数据属性选择元素。 请注意，此代码未经测试

Answer 2

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

喜欢这个：

$("[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>