фильтр на data-атрибутах
Привет всем, так произошло что нужно организовать фильтр блоков через select
В div блоков есть data-атрибут, а имено data-element, у которого есть 3ры параметры: возраст - "5", количество деталей - "100", с или без колесом - "without" + собрал data-атрибуты в массив. Задача такая - каждый select передает в переменную свой параметр, сейчас так и есть. Вот здесь и начинается проблема, как сравнить то, что есть в массиве (а именно с конкретным дата атрибутом блока содержащийся в массиве) с тем, что передается в переменную через select (по одной переменной). и если есть совпадение то передать ему класс success. Буду очень благодарен за помощь!!! https://jsfiddle.net/zerofx/ug7cbLyj/2/ - пример того что есть |
zerofx,
$(document).ready(function() {
var b = $("[data-element]");
$("select").change(function() {
var a = $("#age").val();
d = $("#size").val(),
e = $("#parts").val(),
c = [a, d, e];
b.hide().filter(function(a, b) {
return $(b).data("element").every(function(b, a) {
return !c[a] || c[a] == b
})
}).show()
})
});
https://jsfiddle.net/ug7cbLyj/6/ |
очень элегантное решение!
Спасибо Вам! Вы как всегда на высоте! |
Извиняюсь но возник вопрос - захотел изменить немного работу фильтра, а именно в части количество ..
Сейчас она выводит именно то количество которое указано в дата атрибуте, но немного не удобно, решил немного его изменить а именно чтобы выводило не конкретное число а по условию равно или меньше значение которое задано в селекте. так все таки удобнее - можно увидеть больше элементов похожих друг на друга...
$(document).ready(function() {
var b = $("[data-element]");
$("select").change(function() {
var a = $("#age").val();
d = $("#size").val(),
e = $("#parts").val(),
c = [a, d, e];
b.hide().filter(function(a, d, b) {
return $(b).data("element").every(function(b, d, a) {
return !c[a] || c[a] & c[d] <= c[d] == b // c[d] <= c[d] - почему-то не срабатывают
})
}).show()
})
});
|
Цитата:
return !c[a] ||(b == +b && +c[a] >= +b) || b == c[a] |
Благодарю за помощь!
Но заметил 1н момент - если фильтрую по количеству деталей, даже если выставлен фильт "количество" - тогда подтягивает блоки с разным возрастом, то есть все блоки которые попадают в диапазон ... на практике он должен был подтягивать как было с самого начала, только один конкретный возраст пробовал поменять условие но никак не могу сделать, чтобы подтягивало + добавил еще один фильтр "Вставки" (селект) - они перестали работать ... https://jsfiddle.net/ug7cbLyj/12/ |
Цитата:
https://jsfiddle.net/ug7cbLyj/14/ строки 7 и 8 переменная f |
не тот код скопировал ... запара =( ...
но http://c2n.me/3GApQpR - фильтр все равно подтягивает элементы по возрасту |
zerofx,
не вижу проблемы - всё на картинке соответствует выбранным параметрам, везде возраст меньше или равно 7 и количество меньше или равно 1000 |
Цитата:
Сейчас логика фильтра просто замечательная, только если явно выбран фильтр как на скрине 7м лет то он должен показать только блоки с дата атрибутом 7, и так далее ежели 5 то 5 ... а сейчас он отображает все блоки по условию меньше или равно ... то как он работает сейчас правильно если не выбран первый филь "возраст" - но ежели он вибран - то отображает блоки с нужним возрастом + условие меньше или равно - для количества элементов |
| Часовой пояс GMT +3, время: 16:47. |