0

Есть проблема. ВОт код:

$(document).ready(function(){
  let src = '';
  $('.leave').mouseover(function(){
    src = $(this).children('img').attr('src').slice(0,-4) + '_red.svg';
    $(this).children('img').attr('src',src);
  });

  $('.leave').mouseout(function(){
    src = $(this).children('img').attr('src').slice(0,-8) + '.svg';
    $(this).children('img').attr('src',src);
  });
 });

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

3
  • 1
    обработчик добавляется конкретному элементу. После добавления, неважно присутствует класс или нет.
    – Grundy
    Commented 9 окт. 2018 в 9:18
  • А я могу убрать с данного элемента обработчик? или как-то заблокировать. У меня была идея сделать layout прозрачный, но это немного дико. Commented 9 окт. 2018 в 9:20
  • 3
    А я могу убрать с данного элемента обработчик? - да, в jquery, например есть метод .off
    – Grundy
    Commented 9 окт. 2018 в 10:14

1 ответ 1

0

Альтернативой использования .mouseover(), .mouseout() и отключения обработчиков при помощи .off, есть использование метода .on().

Который позволяет при написании скрипта не следить за наличием класса у элемента.

Пример кода

$(document).ready(function() {
  function onMouseover(e) {
    $(e.currentTarget).css('background', '#000');
  }

  function onMouseout(e) {
    $(e.currentTarget).css('background', '#fff');
  }

  $(document).on("mouseover", ".leave", onMouseover);
  $(document).on("mouseout", ".leave", onMouseout);
  
  $('.remove-class').click(function() {
    $('.leave').removeClass('leave');
  });
});
.box {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box leave"></div>
  <div class="box leave"></div>
  <div class="box leave"></div>
</div>
<button class="remove-class">Удалить класс</button>

1
  • Наличие класса - это понятно. Я понял как сделать bind и unbind. Я при помощи этого смог сделать данную функцию. Спасибо. Commented 10 окт. 2018 в 12:17

Ваш ответ

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

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