@astrodeep

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

Добрый день есть такой скрипт
$( ".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-то есть по отдельности. Спасибо
  • Вопрос задан
  • 36 просмотров
Решения вопроса 1
@MrDecoy
Верставший фронтендер
Итак, я представил что у Вас следующая 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. Так как песочницу Вы не предоставили, код на работоспособность не тестировался.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack
Потому что конструкция $(".card__wrapper_api") находит все элементы на странице. А вам нужно найти только один в конкретном контейтере.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы