JQuery несколько фильтров по классам
Я создаю параметр фильтра с параметром нескольких фильтров. Я хочу отфильтровать классы, но не могу заставить это работать. Мне удается создать несколько фильтров. Эти фильтры также можно комбинировать. Но если вы затем настроите/измените один из этих фильтров, результаты не будут обновляться.
- Первая замена фильтра 1
- Чем заменить фильтр 2 (местоположение)
- Если теперь вы снова измените фильтр 1 (с неизмененным фильтром 2), результаты не будут обновлены.
$('select').change(function() {
var current = this.value;
$.each($('#FilterContainer').find('div.all').not('.hidden').not('.' + current), function() {
$(this).addClass('hidden');
});
$.each($('#FilterContainer').find('div.all').is('.' + current), function() {
$(this).removeClass('hidden');
});
});.hidden { display: none; }<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Filter:</p>
<select class = "filterby">
<option value = "all"><h5>Show All</h5></option>
<option value = "1"><h5>One</h5></option>
<option value = "2"><h5>Two</h5></option>
<option value = "3"><h5>Three</h5></option>
</select>
<p>Location:</p>
<select class = "filterby">
<option value = "all"><h5>All Locations</h5></option>
<option value = "nj"><h5>NJ</h5></option>
<option value = "ny"><h5>NY</h5></option>
<option value = "pa"><h5>PA</h5></option>
</select>
<div id = "FilterContainer">
<div class = "all 1 nj">Test One NJ</div>
<div class = "all 1 ny">Test One NY</div>
<div class = "all 1 pa">Test One PA</div>
<div class = "all 2 nj">Test Two NJ</div>
<div class = "all 2 ny">Test Two NY</div>
<div class = "all 2 pa">Test Two PA</div>
<div class = "all 3 nj">Test Three NJ</div>
<div class = "all 3 ny">Test Three NY</div>
<div class = "all 3 pa">Test Three PA</div>
</div>(или на jsfiddle)
Выбор «фильтра» имеет недопустимую разметку. Узлы <option> могут иметь только Текст (текстовые узлы и фразовое содержание), но не элементы заголовка.
Привет, Андреас. Извините, я здесь новичок, и мне еще предстоит это открыть. Спасибо за вашу помощь!
@morrits присваивает идентификаторы выбранным вами раскрывающимся спискам, чтобы упростить жизнь. в противном случае значение this может привести к путанице. Вот рабочий пример: jsfiddle.net/RachGal/ejsnu3bq
Нет проблем :) Добро пожаловать
Привет @RachelGallen Кажется, он не работает должным образом. Если я делаю первый щелчок по фильтру 1, ничего не происходит, и если я сначала использую другой фильтр, а затем фильтр 1, он работает. И, наконец, если мне нужен третий фильтр (например, страны), как мне этого добиться? Я думаю, таким же образом. Но я не могу заставить его работать.
Извините, раньше вводил. Смотрите мой комментарий выше. Вы можете проверить вариант с фильтром страны здесь: stackoverflow.com/questions/56314940/…
@morrits это должно быть только отправной точкой (иначе я бы опубликовал ответ). sO — это не сервис для написания кода, я уверен, что вы можете улучшить его. Я готовлю еду в минуту. Я уверен, что вы понимаете, что назначение отдельных идентификаторов упрощает получение точных значений в любом случае.
@RachelGallen да, ты прав. Я собираюсь играть с ним! Спасибо еще раз.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Возможно, вы захотите сбросить все элементы при каждом взаимодействии с пользователем, удалив класс .hidden. В верхней части вашей функции .change() попробуйте следующее:
.removeClass('hidden');
Как только вы удалите .hidden из всех элементов, вы можете добавить класс к элементам, которым он нужен.
В примере с JSFiddle вы можете написать так:
$('select').change(function () {
var current = this.value;
$.each($('#FilterContainer').find('div.all'), function () {
$(this).removeClass('hidden');
});
$.each($('#FilterContainer').find('div.all').not('.' + current), function () {
$(this).addClass('hidden');
});
});
Большое спасибо за быстрый ответ. Ценить это! Извините, я включил неправильный код в сообщение. См., например, jsfiddle или (новый) код выше.
Пожалуйста, всегда старайтесь добавлять минимальный воспроизводимый пример в сам вопрос (желательно как сниппет ->
<>/ Ctrl+M), а не только ссылку на внешний ресурс, который может быть недоступен (офлайн, заблокирован, ...).