Question

我正在使用哈希值来检测幻灯片中的当前幻灯片，但是我只想在使用上一个或下一个按钮进行幻灯片放映时进行此操作。但是，即使未单击上一个或下一个按钮，也会触发检测到幻灯片播放过渡的“循环后”事件。

如何使该事件仅在点击功能期间运行？

JSFiddle在这里：https://jsfiddle.net/yd8L3enj/4/

$(document).ready(function() {
  var clicked = false;

  $('.controls').on('click', function() {
    $('.cycle-slideshow').on('cycle-after', function(event, optionHash) {
      var hash = window.location.hash;
      $('.clicked').removeClass('clicked')
      if (window.location.hash === hash) {
        $(hash).addClass('clicked')
      } else {
        $(hash).removeClass('clicked')
      }
    });
  });

  $('nav a').on('click', function() {
    clicked = !clicked;
    $('.clicked').removeClass('clicked');
    $(this).addClass('clicked');
    $('.content').addClass('visible');
  });

  $("nav a").mouseenter(function() {
    var href = $(this).attr('href');
    window.location.hash = href
    $('.content').addClass('visible');
  }).mouseleave(function() {
    var current = $('.clicked').attr('href');
    window.location.hash = current
    if ($(".clicked")[0]) {
      // Do something if class exists
    } else {
      $('.content').removeClass('visible');
    }
  });




  $('.close').on('click', function() {
    $('.content').removeClass('visible');
    window.location.hash = ""
    clicked = !clicked;
  });


});

body {
  font-size: 150%;
}

img {
  width: 50vw;
  height: auto;
}

.clicked {
  color: green;
}

.content {
  display: none;
}

.visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<nav>
  <a href="#1" id="1">1</a>
  <a href="#2" id="2">2</a>
  <a href="#3" id="3">3</a>
</nav>
<div class="content">
  <div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev=".prev" data-cycle-next=".next" data-cycle-speed="1" data-cycle-fx="fadeOut">
    <div data-cycle-hash="1">
      <img src="https://placeimg.com/640/480/animals">
    </div>
    <div data-cycle-hash="1">
      <img src="https://placeimg.com/640/480/animals/2">
    </div>
    <div data-cycle-hash="2">
      <img src="https://placeimg.com/640/480/arch">
    </div>
    <div data-cycle-hash="2">
      <img src="https://placeimg.com/640/480/arch/2">
    </div>
    <div data-cycle-hash="3">
      <img src="https://placeimg.com/640/480/nature">
    </div>
    <div data-cycle-hash="3">
      <img src="https://placeimg.com/640/480/nature/2">
    </div>
  </div>
  <div class="controls">
    <div class="prev">Prev</div>
    <div class="next">Next</div>
    <div class="close">Close</div>
  </div>
</div>

Answer 1

$(selector).on(...语法绑定事件侦听器。每次执行单击侦听器时，您的代码会将事件侦听器添加到“循环后”事件。这意味着，一旦单击它，从此以后的所有循环事件都将执行该代码。如果单击多次，则将绑定多个侦听器，并且在每个循环后事件中将运行更多的侦听器。

您可能想做的是，单击一次仅在下一个循环后事件之后执行代码。为此，您可以绑定侦听器，并在回调的末尾再次取消绑定。像这样：

  $('.controls').on('click', function() {
    $('.cycle-slideshow').on('cycle-after', afterCycle);

    function afterCycle(){
      ... your logic here ...
      $('.cycle-slideshow').off('cycle-after', afterCycle);
    }
  });

请记住，这仍然非常脆弱。如果您在第一个循环后发生之前单击两次，则库可能仅在第一个循环后发生触发，并且您仍然会有不需要的侦听器绑定。如果此幻灯片库支持它，则最好在“循环后”中简单地绑定一次，然后添加一项检查，该检查仅在该循环是由单击引起的情况下才能继续。

内点击事件触发外点击事件

1 个答案: