0

Всем добрый день. Может кто помочь с пояснением? Есть три одинаковых блока с кнопкой, при клике по кнопке именно этому блоку добавить класс, а не всем сразу. И снова при клике по всему блоку класс удаляется, только это происходит после того, как убрали курсор с блока. Не могу понять алгоритм действий. Пример

$(document).ready(function () {
    $('button').on('click', this, function () {
        $('.red').toggleClass('active');
        $('.green').slideToggle();

    });

});
.items {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}
.etem {
  width: 500px;
  height: 500px;
  margin: 0 10px;
}
.red {
   background: red;
     width: 200px;
  height: 200px;
}
.green {
   background: green;
     width: 200px;
  height: 100px;
  display: none;
}
.active {
   background: black;
}
<div class="items">
    <div class="item">
        <div class="red"></div>
        <div class="green"></div>
        <button>click</button>
    </div>
    <div class="item">
        <div class="red"></div>
        <div class="green"></div>
        <button>click</button>
    </div>
    <div class="item">
        <div class="red"></div>
        <div class="green"></div>
        <button>click</button>
    </div>
</div>

2
  • Первая часть вопроса - ясна. Добавить класс блоку, на котором произошел клик. А вот этот совсем непонятно "И снова при клике по всему блоку класс удаляется, только это происходит после того, как убрали курсор с блока." Commented 19 авг. 2021 в 7:43
  • Т.е мы кликаем второй раз по всему блоку и класс удаляется именно у этого блока, это действие происходит после ухода курсора мыши с блока.
    – Yulya919
    Commented 19 авг. 2021 в 7:51

1 ответ 1

1

Используйте this, чтобы действия применялись именно на тот блок и кнопку, по которому кликаете. Через методы closest и find находите те элементы, которые хотите изменить.

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

Опять же при клике на кнопку событие mouseleave будет отменяться.

$(document).ready(function () {        
    $('.item').click(function (e) {    
      if (e.target.tagName == 'BUTTON'){
          $(this).closest('.item').find('.red').addClass('active');
          $(this).closest('.item').find('.green').slideDown();
          $(this).off("mouseleave");
          return
      }
      
      $(this).mouseleave(function () {
        $(this).find('.red').removeClass('active');
        $(this).find('.green').slideUp();
      })      
    });
});
.items {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}
.etem {
  width: 500px;
  height: 500px;
  margin: 0 10px;
}
.red {
   background: red;
     width: 200px;
  height: 200px;
}
.green {
   background: green;
     width: 200px;
  height: 100px;
  display: none;
}
.active {
   background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items">
    <div class="item">
        <div class="red"></div>
        <div class="green"></div>
        <button>click</button>
    </div>
    <div class="item">
        <div class="red"></div>
        <div class="green"></div>
        <button>click</button>
    </div>
    <div class="item">
        <div class="red"></div>
        <div class="green"></div>
        <button>click</button>
    </div>
</div>

1
  • Спасибо за разъяснения!
    – Yulya919
    Commented 19 авг. 2021 в 10:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.