Как сделать чтобы функция выполнялась только тогда, когда выполнились оба условия?

108

07 июня 2021, 10:10

Как сделать чтобы функция выполнялась только тогда, когда выполнились оба условия? Необходимо, чтобы блок становился серым только при условии, когда нажата кнопка И курсор был убран с самого блока. Сейчас на mouseleave не реагирует

$reservation.on("click mouseleave", function () { 
    $(this).text("Подробнее"); 
    $(this).parent().css("filter", "grayscale(100%)"); 
});

.block{ 
  width: 200px; 
  height: 175px; 
  display: inline-block; 
  filter: grayscale(0%); 
  transition: 1s; 
  color: steelblue; 
  font-size: 30px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="block"> 
    <img src="https://picsum.photos/id/223/200/150" alt=""> 
    text 
    <button class="button">Button</button> 
</div> 
<div class="block"> 
    <img src="https://picsum.photos/id/222/200/150" alt=""> 
    text 
    <button class="button">Button</button> 
</div> 
<div class="block"> 
    <img src="https://picsum.photos/id/225/200/150" alt=""/> 
    text 
    <button class="button">Button</button> 
</div>

Answer 1

При клике, в объекте элемента можно сохранить любой индикатор, что он был кликнут. А потом при mouseleave проверять его.

$('.button').on('click', function(e) { 
  this.bubu = true; 
}); 
 
$('.block').on('mouseleave', function() { 
  var ths = $(this); 
  if ( ths.find('.button').prop('bubu') ) { // Если не кликали, будет undefined (false) 
    ths.find('.button').text("Подробнее"); 
    ths.css("filter", "grayscale(100%)"); 
  } 
}); 
 
$('.block').on('click', function(e) { 
  if ( $(e.target).closest('.button').length ) { return; } 
  // e.target - элемент. на который кликнули.  
  // Если кликнули на кнопку - то .length будет 1 (true) - функция прервется 
  // А если клик любом другом месте - оно будет 0 (в логическом контексте - false) 
  var ths = $(this); 
  ths.find('.button').prop('bubu', false); 
  ths.css("filter", "grayscale(0%)"); 
});

.block{ 
  width: 200px; 
  height: 200px; 
  display: inline-block; 
  filter: grayscale(0%); 
  transition: 1s; 
  color: steelblue; 
  font-size: 30px; 
  border: 1px solid red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="block"> 
  <img src="https://picsum.photos/id/223/200/150" alt=""> text 
  <button class="button">Button</button> 
</div> 
<div class="block"> 
  <img src="https://picsum.photos/id/222/200/150" alt=""> text 
  <button class="button">Button</button> 
</div> 
<div class="block"> 
  <img src="https://picsum.photos/id/225/200/150" alt="" /> text 
  <button class="button">Button</button> 
</div>