Question

所以我有一个网站加载一开始就暂停的GIF。我有.on（＆＃34; event＆＃34;）功能可以单独使用，点击和悬停。但是我想让用户选择他们想要使用哪种方法来播放带有设置的gif。我正在使用的代码类似于：

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

当然，点击它时，如果它已经播放，它会暂停gif。

我有按钮来设置bool hoverOn，这可以改变bool，但它不会重新加载页面，所以即使bool正在改变，播放gif的触发器保持不变。有没有办法让if / else在页面中搜索动态？

谢谢，我希望我能够解释自己。

Answer 1

切换布尔测试和处理程序的位置，以便在处理程序的内中测试布尔值：

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

Answer 2

我可能会尝试将它们结合起来。

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

    playTheGif();
});

＆＃13;

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', '');
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以取消设置当前事件，并在用户切换hoverOn时设置新事件。例如：

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

切换什么在jQuery中触发事件而不重新加载？

3 个答案: