Как выполнить скрипт с одинаковыми классами для одного div?

Question

[Анастасия]

У меня есть страница где есть очень много одинаковых div с одинаковыми классами. И есть такой скрипт:

$(document).ready(function () {
  $(".vouncher__header-logo").hide();
  $(".vouncher__affordable-price").hide();
  $(".vouncher__footer-choose").hide();
  $(".open-vounchers").click(function () {
    this.closest(".vouncher__header-logo").show();
    this.closest(".vouncher__footer-choose").show();
    this.closest(".vouncher__affordable-price").show();
    this.closest(".vouncher__header-add").hide();
    this.closest(".vouncher__header-price").hide();
    this.closest(".vouncher__image").hide();
    this.closest(".vouncher__footer-chosen").hide();
  });
});

При нажатии на кнопку с классом .open-vounchers, скрипт выполняется для всех div которые имеют эти классы. Есть ли возможность сделать так, чтобы при нажатии на кнопку скрипт выполнялся только для того div в котором эта кнопка находится?

Comments

[Froggyweb]

не надо так писать плиз....

$(".open-vounchers").click(function () {
    this.classList.add("show")
}

Answer 1

[Ольга]

Можно сделать, например, так:

$(".open-vounchers").click(function () {
  /* поскольку разметка к вопросу не приложена, предположу что каждый блок - это  .vouncher */
  $(this).parent(".vouncher").find(".vouncher__header-logo").show();
  /* и таким же образом все остальные элементы обработать */
});

у вас в скрипте каждый элемент который нужно скрыть-показать обрабатывается отдельно, вместо этого можно добавить в разметку два класса, которые к стилизации отношения иметь не будут, но будут использоваться скриптом, например .js-hide и .js-show и показывать-скрывать элементы добавляя-убирая эти классы, например.

Comments

[Анастасия]

Ничего не происходит и консоль ошибки не выдает(

[Ольга]

создайте песочницу с вашей разметкой и вашим скриптом, так невозможно понять что у вас происходит