Переключить, что вызывает событие в jQuery без перезагрузки?

Итак, у меня есть веб-сайт, который загружает гифки, приостановленные в начале. У меня есть функции .on ("событие"), которые отлично работают отдельно, при щелчке и наведении курсора. Однако я хотел бы позволить пользователю выбирать, какой из этих методов он хотел бы использовать для воспроизведения гифки с настройкой. Код, с которым я работаю, выглядит примерно так:

if (hoverOn) {
    $(document).on("hover", ".content", function () {
        playTheGif ();
    }
}
else {
   $(document).on("click", ".content", function () {
       playTheGif ();

и, конечно же, при нажатии он приостанавливает гифку, если она уже воспроизводится.

У меня есть кнопки для установки bool hoverOn, и это работает для изменения bool, но не перезагружает страницу, поэтому триггер для воспроизведения gif остается прежним, даже если bool меняется. Есть ли способ сделать этот поиск if / else динамическим на странице?

Спасибо, надеюсь, я достаточно объяснил.

javascript jquery

14.06.2018 22:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Переключите положение логического теста и обработчиков так, чтобы логическое значение проверялось внутри обработчиков:

$(document).on("hover", ".content", function () {
  if (hoverOn) playTheGif ();
})
$(document).on("click", ".content", function () {
  if (!hoverOn) playTheGif ();
});

Это именно то, что мне нужно. Не могу поверить, что это не пришло мне в голову. Спасибо.

— 14.06.2018 23:00

14.06.2018 22:55

Вы можете отменить текущие события и установить новые, когда пользователь переключает hoverOn. Например:

if (hoverOn) {
    $(".content").unbind("click");
    $(document).on("hover", ".content", function () {
        playTheGif ();
    }
}
else {
    $(".content").unbind("hover");
    $(document).on("click", ".content", function () {
        playTheGif ();
    }
}

14.06.2018 22:58

Я бы, наверное, попробовал их совместить.

$(document).on("click mouseenter", ".content", function (e) {
    //do nothing for hoveron,click or hoveroff,hover
    if (hoverOn ^ e.type === "mouseenter") return;

    playTheGif ();
});

var hoverOn = true;

$(document.body).on("click mouseenter", ".content", function (e) {
    //do nothing for hoveron,click or hoveroff,hover
    if (hoverOn ^ e.type === "mouseenter") return;

    //playTheGif ();
    $(e.target).css('backgroundColor', 'green');
});

$('button').on('click', function(){
  hoverOn = !hoverOn;
  
  $('#interaction').text(hoverOn ? 'hover' : 'click' );
  $('.content').css('backgroundColor', '');
});

.content {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "content"></div>
<div class = "content"></div>
<div class = "content"></div>
<div class = "content"></div>
<div>
  <button>Toggle Interaction</button>
  <span id = "interaction">hover</span>
</div>

14.06.2018 23:03

Другие вопросы по теме

Логика мультифильтрации с использованием элементов списка

AddClass не работает на iphone Chrome

Как присвоить уникальный номер каждому объекту, возвращаемому в каждом цикле jQuery?

JQuery получить текущее значение выбора текущего параметра

Как преобразовать пользовательское модальное окно CSS в модальное окно Bootstrap?

Отправка данных с помощью jquery ajax в MVC с методом ADO.NET

Элемент длины форматирования jQuery Datatables

Использование JQuery Datepicker (элементы с повторяющимися идентификаторами)

JQuery не добавляет класс в браузер Firefox, но работает в Chrome

Как остановить все видео YouTube при изменении параметра в списке выбора

Переключить, что вызывает событие в jQuery без перезагрузки?

Ответы 3

Другие вопросы по теме

Похожие вопросы