0

Как сделать чтобы функция выполнялась только тогда, когда выполнились оба условия? Необходимо, чтобы блок становился серым только при условии, когда нажата кнопка И курсор был убран с самого блока. Сейчас на 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>

1 ответ 1

2

При клике, в объекте элемента можно сохранить любой индикатор, что он был кликнут. А потом при 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>

4
  • Блок становиться серым когда курсор сходит с кнопки, а надо чтобы когда курсор сходил с самого блока
    – Imp3l
    18 авг 2019 в 10:59
  • @Imp3l подправил* 18 авг 2019 в 11:04
  • не подскажете, как сделать, чтобы при нажатии на весь блок, он снова становился нормального цвета?
    – Imp3l
    18 авг 2019 в 11:38
  • 1
    @Imp3l добавил. А если захочется при этом сохранить предыдущий текст кнопки и потом возвращать его вместе с цветом - этот текст точно также можно хранить где-нибудь в другом свойстве, аналогично bubu ) 18 авг 2019 в 12:11

Ваш ответ

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

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