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

Question

Это фрагмент jQuery, который я написал для достижения эффекта «показать / скрыть» на странице. s1,s2,s3... - это идентификаторы кнопок div. Там будет около 25 из них. Когда нажата кнопка s1, div q1 будет скрыт, а div q2 покажет.

Существует ли краткий способ написать только один такой фрагмент, чтобы охватить все случаи сразу вместо 26?

$("#s1").click(function(e) {
         $("#q1").hide();
         $("#q2").show();
         });

$("#s2").click(function(e) {
          $("#q2").hide();
         $("#q3").show();
         });

 $("#s3").click(function(e) {
         $("#q3").hide();
         $("#q4").show();
         });
.
.
,
.
.
.
.
.
$("#s25").click(function(e) {
         $("#q25").hide();
         $("#q26").show();
         });

Answer 1

Вы можете назначить каждой кнопке свой класс и добавить прослушиватель события click для элементов этого класса. Когда кнопка нажата, вы можете получить ее идентификационный номер, используя this.id.match(/\d+/g);, и использовать, а затем использовать номер, полученный в других селекторах:

$(".myClass").click(function() {
  const [n] = this.id.match(/\d+/g); // get number from the id
  $("#q"+n).hide();
  $("#q"+(+n+1)).show();
}

Answer 2

Это не хороший способ справиться с вашей задачей. Опора на удостоверения личности должна быть последним средством. Вместо этого поместите общий класс в свои элементы и используйте обход DOM для выбора элементов для переключения.

<a class="my-trigger-element-class">...</a>
<div class="my-toggled-element-class">...</div>

<script>
$('.my-trigger-element-class').click(function() {
    // here I assume that the toggled element immediately follows the trigger
    // this may not be the case, so adjust accordingly
    let toggledEl = $(this).next('.my-toggled-element-class');

    // hide all elements that aren't the adjacent one
    $('.my-toggled-element').not(toggledEl).hide();

    // show just the adjacent one
    $(this).next('.my-toggled-element-class').toggle();
});
</script>

Изучите практически любой скрипт аккордеона jQuery, чтобы увидеть это в действии. Все они используют вариацию этого.

Answer 3

Использовать цикл?

for (let i = 1; i <= 25; ++i) {
  $("#s" + i).click(function(e) {
     $("#q" + i).hide();
     $("#q" + (i + 1)).show();
  });
}

Кроме того, небольшой тангенциальный совет: вам не нужно объявлять параметр "e", если вы не собираетесь его использовать:)

Answer 4

Одна вещь, которую вы можете сделать, это использовать атрибут data-xxx на кнопке, чтобы сделать общую кнопку скрытия / показа. Примером может быть такой

HTML:

<button class="show-hide-button" data-show="#q2" data-hide="#q1">Click</button>

JS:

$(".show-hide-button").click( function(e) {
    $($(this).data('show')).show();
    $($(this).data('hide')).hide();
});