flipster.js - onItemSwitch, кажется, срабатывает, когда я нажимаю на текущий элемент

Question

Я использую флипстер jQuery 'plugin' для анимации, похожей на клевер.Я хочу вызвать событие jQuery (изменить классы текстового div "#content_stage", который находится за пределами флипстера), когда элементы меняются - и только когда они меняются.Этот контейнер ("#content_stage") может загружать различный контент для каждого слайда, но он будет виден только после щелчка "показать содержимое" и должен всегда оставаться скрытым (отсюда и измененный класс), когда карусель флипстера перемещается на другой слайд.

Однако обработчик события onItemSwitch, похоже, срабатывает всякий раз, когда я щелкаю по любому из элементов - даже по текущему элементу (который (конечно) не инициирует фактическое изменение).Вероятно, это так и есть, потому что «onItemSwitch» запускается функцией «function center ()», которая снова, кажется, запускается нажатием на любой элемент.Есть ли способ действительно сосредоточиться только на фактическом событии «изменения»?

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

Я нашел это: вокруг строки 312 в jquery.flipster.js код выглядел так:

// 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)); }
    });

Answer 2

Разве это не должно работать:

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

!?

Что такое $('#content_stage')?Почему вы добавляете в него класс hidden?
Являются ли все идентификаторы уникальными в вашей разметке?

Без примера Minimal, Complete и Verifiable , включая соответствующую разметку, стилизацию ивнешние ресурсы, технически невозможно выяснить, что делает ваш код (кроме того, что вы добавляете / удаляете некоторые классы для элемента с id="content_stage", который может ничего или ничего не делать, но мы не можем точно сказать, из чего выДо сих пор показывалось ...)

Похоже, флипстер запускает 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>