1

Есть дропдаун, в котором пользователь выбирает определенную позицию(при этом выбирается айди). Также есть контейнеры, которые имеют атрибут data-filter, который в зависимости от категории тоже имеют id.Имеем дропдаун:

<select class="filter">
<option value=1>Name 1</option>
<option value=2>Name 2</option>
<option value=3>Name 3</option>
</select>

Один из контейнеров,которые нужно фильтрвоать по атрибуту data-filter:

<div class="item" data-filter=2>container</div>

Таких контейнеров много. Я попробовал взять по селектору .item пробежаться циклом each() и в нем поставить условие при котором контейнеры будут .hide() или .show().Это оказалось накладно с точки зрения производительности.Тогда я обратился к функции filter().

var valuee = $(this).val(); // тут извлекаем значение дропдауна,который выбрал пользователь
        $('.item').filter(function(index){
            return $( this ).data( "filter" ) === valuee;
        });

Не работает. Судя по всему проблема в методе filter(),но я не догоняю в чем именно.Как можно перепесать эту функцию,чтобы она работала?

3
  • 1
    Ваш случай - один из достаточно редких случаев, когда Вы можете полностью воспроизвести проблему в Вашем вопросе, используя кнопку редактора "Фрагмент кода на ...", чтобы облегчить задачу человеку, который захочет Вам помочь. Вместо этого Вы включили в Ваш вопрос неработающие обрывки html и javascript'а, предоставив нам гадать, насколько полно они отражают действительное положение вещей.
    – user176262
    29 ноя 2016 в 17:27
  • 2
    Конкретно к Вашей проблеме (исходя из приведенного кода): $().filter - не прячет/показывает элементы DOM, а возвращает объект-обертку вокруг выборки элементов. $('.item').filter(...).hide();
    – user176262
    29 ноя 2016 в 17:31
  • Вы правы-добавление .hide(); в конце позволяет спрятать ненужные элементы. благодаря пояснению про обертку понял, в чем мой недочет. спасибо
    – Iga
    29 ноя 2016 в 17:35

3 ответа 3

2

Метод filter - возвращает отфильтрованную коллекцию. С самими элементами при этом ничего не происходит.

Поэтому вызов

$('.item').filter(function(index){
    return $( this ).data( "filter" ) === valuee;
});

Вернул нужные элементы, но так как с полученной коллекцией не производятся никакие действия, соответственно нет и результата.

2

У вас ошибка тут:

return $(this).data("filter") === valuee;

Нужно так:

return $( this ).data( "filter" ) == valuee;

Т.к. $(this).val(); вернет строку а $(this).data("filter") число.

Пример

0

Поэкспериментировав, методом тыка получил нужный результат, когда прикрутил метод .css() к методу filter().Оно работае,но все равно я до конца не понимаю как и думаю есть еще какие-то решения без прикручивания inline-стилей. Готов выслушать любые комментарии и предложения)

var valuee = parseInt($(this).val());
    $('.item').filter(function () {
        return $(this).data("filter") != valuee;
    }).css({'display': 'none'});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.