Как дописать jquery скрипт?

Question

[Алекс]

Добрый день есть такой скрипт

$( ".card__wrapper").find('.card__wrapper_api-show').click(function(){

         $(".card__wrapper_api").stop().animate({
              right: "0",
          }, 500, function() {
              // Animation complete.
          });
    });

есть несколько div с классом .card__wrapper в нем бургер с классом .card__wrapper_api-show и скрытый див с классом
.card__wrapper_api, по клику .card__wrapper_api-show появляются сразу все див с классом .card__wrapper_api, как сделать this-то есть по отдельности. Спасибо

Answer 1

[Вадим]

Итак, я представил что у Вас следующая html структура:

<div class="card__wrapper">
  <div class="card__wrapper_api-show">Бургер</div>
  <div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
  <div class="card__wrapper_api-show">Бургер</div>
  <div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
  <div class="card__wrapper_api-show">Бургер</div>
  <div class="card__wrapper_api">Скрытый див</div>
</div>

Если Вам не принципиально отслеживать клики только на тех card__wrapper_api-show, которые находятся в card__wrapper, то:
можно сделать так:

$(".card__wrapper_api-show").click(function() {
    $(this) // jquery элемент, на котором произошёл клик
      .next(".card__wrapper_api") // непосредственно следующий в разметке блок (если идут не друг за другом то можно применить nextAll
      .stop() // Ваш код.
      .animate(
        {
          right: "0"
        },
        500,
        function() {
           // Animation complete.
        }
      );
  });

Если принципиально, то модифицируйте селектор из примера выше на $('.card__wrapper .card__wrapper_api-show').

Более лучшей практикой считается использовать в подобном случае делегирование событий.
Обработчик должен быть на общем контейнере верхнего уровня, и смотреть на каком элементе произошёл клик.
Таким образом, заворачиваем всё в один контейнер, разметка примет вид:

<div class="cards">
  <div class="card__wrapper">
    <div class="card__wrapper_api-show">Бургер</div>
    <div class="card__wrapper_api">Скрытый див</div>
  </div>
  <div class="card__wrapper">
    <div class="card__wrapper_api-show">Бургер</div>
    <div class="card__wrapper_api">Скрытый див</div>
  </div>
  <div class="card__wrapper">
    <div class="card__wrapper_api-show">Бургер</div>
    <div class="card__wrapper_api">Скрытый див</div>
  </div>
</div>

А скрипт:

$(".cards").click(function(evt) {
    // Сохраняем элемент, на котором произошёл клик в jQuery обёртку
    const $element = $(evt.target);
     // проверяем, что элемент содержит класс api-show
    // и если содержит, то делаем что нам надо со следующим в разметке элементом .card__wrapper_api
    if($element.hasClass('.card__wrapper_api-show')){ 
       $element
       .next(".card__wrapper_api")
       .stop()
       .animate(
         {
          right: "0"
        },
        500,
        function() {
          // Animation complete.
         }
       );
    }
  });

Таким образом, у нас всего один обработчик кликов - лучше для производительности.

P.s. Так как песочницу Вы не предоставили, код на работоспособность не тестировался.

Comments

[Алекс]

Спасибо большое за развернутый ответ-буду ковырять

Answer 2

[Alex]

Потому что конструкция $(".card__wrapper_api") находит все элементы на странице. А вам нужно найти только один в конкретном контейтере.

Comments

[Алекс]

так в етом и вопрос-как дописать чтоб найти в конкретном контейнере

[Alex]

Алекс, Вадим ответил