Как правильно сделать делегирование?

Question

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

$(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>

Answer 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>

БЛОГ НА HUSL

Как правильно сделать делегирование?

Ответы (1 шт):