Question

我正在将jQuery'plugin'flipster用于类似四叶草的动画。我想在项目更改时（仅当它们更改时）触发一个jQuery事件（更改文本div“ #content_stage”的类，该类在flipster之外）。该容器（“ #content_stage”）可以为每张幻灯片加载不同的内容，但是只有在单击“显示内容”后才可见，并且在随身行李传送带移至另一张幻灯片时，该容器应始终处于隐藏状态（因此更改了类）。

但是，每当我单击任何项目时，事件处理程序onItemSwitch似乎都会触发-甚至在当前项目上（当然，该项目也不会启动实际的更改）。这可能是因为“ onItemSwitch”是由“ function center（）”触发的，而这又似乎是通过单击 any 项触发的。有办法真的只专注于实际的“更改”事件吗？

ps：我基本上使用的是此演示页面上的确切代码： http://a.drien.com/jquery-flipster/

在jQuery.flipster.js内部，我的设置当前如下所示：

onItemSwitch: function(currentItem, previousItem){

    if( jQuery( "#content_stage" ).hasClass("expanded")) {
        jQuery( "#content_stage" ).removeClass( "expanded" );
        jQuery( "#content_stage" ).addClass( "hidden" );
        alert("alert");
    }
},

更新：请参见下面的答案...

Answer 1

这不是应该的工作

onItemSwitch: (currentItem, previousItem) => {
  $(previousItem).removeClass("expanded");
  $(currentItem).addClass("expanded");
},

!?

$('#content_stage')是什么？为什么要向其中添加类hidden？
所有ID在您的标记中都是唯一的吗？

如果没有Minimal, Complete, and Verifiable example包括相关的标记，样式和外部资源，从技术上讲不可能弄清楚代码的作用（除了使用id="content_stage"向元素添加/删除某些类之外），它什么也做不了，也不能做很多事，但我们无法从您到目前为止显示的内容中真正看出来...）

当项目实际切换时，flipster似乎仅触发onItemSwitch。为了检查，我做了这个演示。如您所见，无论发生什么情况，它只会在商品发生更改时才会触发：

function getIndex(el) {
  return Array.from(el.parentNode.children).indexOf(el)
}
$('.flipster').flipster({
  onItemSwitch: (current,prev) => {
    console.log('switched from ',getIndex(prev),' to ',getIndex(current)
   )
  }
});

<link href="http://brokensquare.com/Code/jquery-flipster/dist/jquery.flipster.min.css" rel="stylesheet"/>
<script src="http://brokensquare.com/Code/jquery-flipster/demo/jquery.min.js"></script>
<script src="http://brokensquare.com/Code/jquery-flipster/dist/jquery.flipster.min.js"></script>

<div class="flipster">
  <ul>
    <li><img src="https://via.placeholder.com/250x250"></li>
    <li><img src="https://via.placeholder.com/250x250"></li>
    <li><img src="https://via.placeholder.com/250x250"></li>
    <li><img src="https://via.placeholder.com/250x250"></li>
    <li><img src="https://via.placeholder.com/250x250"></li>
    <li><img src="https://via.placeholder.com/250x250"></li>
  </ul>
</div>

Answer 2

我找到了它：在jquery.flipster.js的312行附近，代码看起来像这样：

// Navigate directly to an item by clicking
    _flipItems.on("click", function(e) {
        if ( !$(this).hasClass("flip-current") ) { e.preventDefault(); }
        jump(_flipItems.index(this));
    });

因此，任何单击后都会启动“跳转”，即使单击当前项目也是如此。而是应该这样，以防止在单击当前项目时触发onItemSwitch事件：

// Navigate directly to an item by clicking
    _flipItems.on("click", function(e) {
        if ( !$(this).hasClass("flip-current") ) { e.preventDefault(); }
        if ( !$(this).hasClass("flip-current") ) { jump(_flipItems.index(this)); }
    });

flipster.js-当我单击当前项目时，onItemSwitch似乎会触发

2 个答案: