(mixItUp) Кнопки переключения не реагируют - PullRequest
Новая
       24

(mixItUp) Кнопки переключения не реагируют

0 голосов
/ 08 октября 2018

https://www.kunkalabs.com/mixitup/, Я следовал за введением , точнее этим кодом , который можно проверить здесь .Я также попытался скопировать this без удачи.

Кнопки переключения не реагируют, несмотря на то, что кнопки фильтра работают должным образом.

Ссылка на минимум работы пример 

$('#mix-wrapper').mixItUp({
    load: {
        sort: 'order:desc'
    },
    selectors: {        
        filter: '.filter-btn',
        toggle: '.mix-btn'
    },
    callbacks: {
        onMixFail: function (state) {
            alert('No elements found matching ' + state.activeFilter);
        },
        onMixEnd: function (state) {
            console.log(state.activeFilter);
        }
    }
});

.mix {
  display: none;
}

<script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div
 button(class="filter-btn" data-filter=".nodejs") Filter nodejs
 button(class="filter-btn" data-filter=".example") Filter example
 button(class="filter-btn" data-filter="all") show all
 button(class="filter-btn" data-filter="none") hide all
div 
 button(type="button" class="mix-btn" data-toggle=".nodejs") .nodejs TOGGLE BUT
 button(type="button" class="mix-btn" data-toggle=".example") .example TOGGLE BUT

 ul#mix-wrapper
  li.mix.nodejs 
   div(style="width: 18rem;") nodejs 1
  li.mix.nodejs
   div(style="width: 18rem;") nodejs 12
  li.mix.example
   div(style="width: 18rem;") example1
  li.mix.example
   div(style="width: 18rem;") example12
  li.mix
   div(style="width: 18rem;") testing
  li.mix 
   div(style="width: 18rem;") testing

1 Ответ

0 голосов
/ 14 октября 2018

Я являюсь автором MixItUp.

Похоже, ваш пример основан на MixItUp v2, который является старым плагином jQuery с 2014 года. Элементы управления Toggle были введены в v3, который был выпущен в 2016 году и являетсяпоследняя основная версия.Вся документация на сайте MixItUp предназначена для v3.По сути, вы пытаетесь объединить библиотеку v2 с частями API v3, что приведет к различным ошибкам или отсутствию функциональности.

Во-первых, вы можете обратиться к руководству по миграции v2-v3, чтобы помочь вам.и работает с v3, и убедитесь, что любое использование API v2 удалено из вашего кода:

https://www.kunkalabs.com/mixitup/migration-guide/

Во-вторых, ознакомьтесь с руководством, озаглавленным: «Фильтрация с помощью MixItUp».Элементы управления переключателями и связанные с ними концепции подробно описаны здесь:

https://www.kunkalabs.com/tutorials/filtering-with-mixitup/

Наконец, MixItUp 3 включает в себя несколько демонстраций, которые помогут вам начать работу с любой функцией (http://demos.kunkalabs.com/mixitup).

Существуют две демонстрации управления переключателями, которые демонстрируют разницу между логикой управления «И» и «ИЛИ», которая, будем надеяться, будет вам полезна:

https://demos.kunkalabs.com/mixitup/toggle-filtering-or-logic/ https://demos.kunkalabs.com/mixitup/toggle-filtering-and-logic/

...