HTML <выберите> JQuery перемешать не работает IOS

Question

HTML <выберите> JQuery перемешать не работает IOS

0

Привет, я использую jquery mix it up plugin для раздела портфеля в Интернете. Все в порядке. Но я создал меню выбора для мобильных устройств (используя классы bootstrap hidden-xs и visible-xs). В обычном браузере работает нормально, но в iphone не работает. Я могу выбрать вариант, но ничего не произойдет. Эффект смешивания не появляется, как и остальные браузеры.

Это мой html

<select class="visible-xs form-control " id="filters">
<option class="filter active"  data-filter="cat1 cat2 cat3 cat4 cat5"><span >All</span></option>
<option class="filter" data-filter="cat1"><span >Cat1</span></option>
<option class="filter" data-filter="cat2"><span>Cat2</span></option>
<option class="filter" data-filter="cat3"><span >Cat3</span></option>
<option class="filter" data-filter="cat4"><span>Cat4</span></option>
<option class="filter" data-filter="cat5"><span>Cat5</span></option>
</select>
<ul id="filters" class="hidden-xs clearfix">
<li><span class="filter active" data-filter="cat1 cat2 cat3 cat4 cat5">All</span></li>
<li><span class="filter" data-filter="cat1">Innovación</span></li>
<li><span class="filter" data-filter="cat2">Investigación</span></li>
<li><span class="filter" data-filter="cat3">Artículos</span></li>
<li><span class="filter" data-filter="cat4">Libros</span></li>
<li><span class="filter" data-filter="cat5">Web</span></li>
</ul>

<div id="portfoliolist">
....the code of each item....

и это мой код Java:

$(function () {

        var filterList = {

            init: function () {

                // MixItUp plugin
                // http://mixitup.io
                $('#portfoliolist').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'smooth',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });             

            },

            hoverEffect: function () {

                // Simple parallax effect
                $('#portfoliolist .portfolio').hover(
                    function () {
                        $(this).find('.label-content').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                        $(this).find('img').stop().animate({top: -100}, 500, 'easeOutQuad');                
                    },
                    function () {
                        $(this).find('.label-content').stop().animate({bottom: -100}, 200, 'easeInQuad');
                        $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                               
                    }       
                );              

            }

        };

        // Run the show!
        filterList.init();


    });

Кто-нибудь знает, что может быть неправильно? заранее спасибо

Trenton 06 нояб. 2013, в 19:59

Источник

Теги:

javascript

jquery

html

ios

1 ответ

Ещё вопросы

cjd82187 · Accepted Answer · 2013-11-06T17-56-00.000Z

Я не знаком с MixItUp, но посмотрев документацию на минуту, они объясняют, как работает фильтр: http://mixitup.io/#FilterSelector

Похоже, что он добавляет событие click, и поскольку вы используете поле select, оно не запускает событие click. Вы можете вручную вызывать параметры фильтра, но на основе изменения значения поля выбора.

Сделайте свой выбор примерно так:

<select class="visible-xs form-control " id="filters">
    <option value="cat1 cat2 cat3 cat4 cat5">All</option>
    <option value="cat1">Cat1</option>
    <option value="cat2">Cat2</option>
    <option value="cat3">Cat3</option>
    <option value="cat4">Cat4</option>
    <option value="cat5">Cat5</option>
</select>

И вызвать метод фильтра при изменении значения:

$('#filters').on('change', function() { 
   $('#portfoliolist').mixitup('filter',this.value);
});

Здесь сценарий JS этого, его предупреждение о выборе, код фильтра закомментирован. http://jsfiddle.net/Xk7Bp/

UPDATE: Кроме того, у вас есть несколько элементов с одинаковым id="filters" которые являются недопустимыми и могут привести к проблемам.

Работает как шарм! Я думал, что я должен был фильтровать с помощью фильтра данных, а не с параметром значения :( Большое спасибо!
data- * используется в javascript для хранения произвольных данных, значение которых вы должны были передать. Опции имеют встроенный атрибут value, поэтому имеет смысл использовать его.