Как отключить срабатывание сразу на все кнопки одного класса?

Question

[iminby]

<script>
            $(document).ready(function() {
            var list = $(".product__list-item");
  var numToShow = 5; 
  var button = $(".product__button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
  });
});
    </script>

Код для кнопки на лендосе, чтобы показывать товары при нажатии на кнопку ещё, но если несколько кнопок, то событие срабатывает на все, подскажите, что нужно добавить, чтобы срабатывало лишь на одну, на которую происходит клик, хоть они одного класса.

Comments

[lpite]

Можешь просто добавит ещё один пустой класс

[Антон Литвиненко]

мне кажется вы не с той стороны зашли. например есть 10 кнопок и 10 скрытых областей, который нужно показывать при нажатии на кнопку. для каждой кнопки - своя область? плюс-минус такая задача? тогда нужно отталкиваться от сработавшей кнопки, от ее this. и от этого this подгружать нужный блок, каким-то образом связанный именно с этой кнопкой

Answer 1

[chelnokov_a]

var button = $(".product__button"); - так мы обращаемся ко всем кнопкам. Надо обратиться только к одной.

Например это может быть так - document.querySelectorAll('.product__button')[7].
В данном случае 7 это индекс кнопки чтобы отследить индекс выведи это в консоль document.querySelectorAll('.product__button')

Но по нормальному надо задать id или Data-атрибут и обращаться к кнопке по ним

Comments

[iminby]

Как поступить, если на странице 2 блока одинаковых, с разным контентом, выводит список товаров и надо их подгружать