Как в jQuery улучшить функцию для работы с отдельными блоками?

Question

[Mixa]

Есть такой код, скрывающийпоказывающий код по клику на кнопку:

<a class="content_toggle" id="button-1" href="#">Показать текст</a>

 
<div class="content_block" id="box-1" style="display: none;">
	<p>Блок скрытого текста...</p>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
	$('#button-1').click(function(){
		$('#box-1').slideToggle(300, function(){
			if ($(this).is(':hidden')) {
				$('#button-1').html('Показать текст');
				$('#button-1').removeClass('open');
			} else {
				$('#button-1').html('Скрыть текст');
				$('#button-1').addClass('open');
			}							
		});
		return false;
	});
});
</script>

Работает отлично. Но как его унифицировать, если я хочу иметь много подобных блоков и кнопок на странице. Как можно сделать елегантую привязку по айди кнопки и блока, без множественного клонирования функции?

Answer 1

[0xD34F]

$('.content_toggle').click(function() {
  const $button = $(this);

  $(`#box-${this.id.split('-').pop()}`).slideToggle(300, function() {
    const isHidden = $(this).is(':hidden');
    $button
      .text(isHidden ? 'Показать текст' : 'Скрыть текст')
      .toggleClass('open', !isHidden);
  });

  return false;
});

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

$(this).closest('здесь селектор общего предка').find('.content_block')

Или, если все элементы расположены последовательно, кнопка-блок-кнопка-блок-..., то тогда блок можно будет получить следующим образом:

$(this).next()

В случае, когда кнопки и соответствующие им блоки расположены в одном и том же порядке, есть вариант этим воспользоваться:

$('.content_block').eq($('.content_toggle').index(this))