Есть ли лучший способ прикрепить javascript к нескольким элементам HTML?

Question

Приносим извинения за запутанный заголовок - не могу найти лучший способ сформулировать это.

У меня есть текстовое поле и подсчет слов следующим образом:

<textarea class="form-control caption-box" name="caption" id="caption" rows="5"></textarea>

<span class="pull-right label label-default count-message" id="count_message"></span>

И затем я показываю подсчет слов с использованием javascript.

   $('#caption').keyup(function() {
      var text_length = $('#caption').val().length;
      var text_remaining = text_max - text_length;
      $('#count_message').html(text_length+' characters');
    });

    var text_length = $('#caption').val().length;
    var text_remaining = text_max - text_length;
    $('#count_message').html(text_length+' characters');

Мне нужно добавить еще 6 текстовых полей на страницу, все с функцией подсчета слов. Я мог бы просто воссоздать javascript 6 раз и изменить идентификатор элемента, но это кажется неэффективным.

Есть ли лучший способ добиться этого?

Answer 1

Используйте классы для выбора текстовых полей и динамически переходите из обработчика к связанному элементу caption. Например, если они расположены рядом, вы можете использовать .next():

const maxLength = 100;
function showRemaining() {
  const currLength = $(this).val().length;
  const remaining = maxLength - currLength;
  $(this).next().text(remaining + ' characters');
}

$('.caption').on('input', showRemaining);
$('.caption').trigger('input');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="caption" rows="5"></textarea>
<div></div>
<textarea class="caption" rows="5"></textarea>
<div></div>
<textarea class="caption" rows="5"></textarea>
<div></div>
<textarea class="caption" rows="5"></textarea>
<div></div>

Это довольно тривиально для выполнения sh без jQuery, если только это не необходимо для чего-то еще, не стесняйтесь удалять его как зависимость:

const maxLength = 100;
function showRemaining() {
  const currLength = this.value.length;
  const remaining = maxLength - currLength;
  this.nextElementSibling.textContent = remaining + ' characters';
}
for (const caption of document.querySelectorAll('.caption')) {
  caption.addEventListener('input', showRemaining);
  caption.dispatchEvent(new Event('input'));
}

<textarea class="caption" rows="5"></textarea>
<div></div>
<textarea class="caption" rows="5"></textarea>
<div></div>
<textarea class="caption" rows="5"></textarea>
<div></div>
<textarea class="caption" rows="5"></textarea>
<div></div>

Answer 2

Это последний код, который сработал:

HTML x 6

<textarea class="form-control caption-box" name="caption" id="caption" rows="5"></textarea>

<span class="pull-right label label-default count-message" id="count_message"></span>

Javascript

$('.caption-box').each(function() {
  var text_length = $(this).val().length;
  $(this).next().html(text_length + ' characters');
});

$('.caption-box').keyup(function() {
  var text_length = $(this).val().length;
  $(this).next().html(text_length + ' characters');
});