фильтр на 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 ... а сейчас он отображает все блоки по условию меньше или равно ... то как он работает сейчас правильно если не выбран первый филь "возраст" - но ежели он вибран - то отображает блоки с нужним возрастом + условие меньше или равно - для количества элементов |
zerofx,
не осилил |
может так будет проще ... =))
1) когда в фильтре выставлен только 1н фильтр, а именно количество - как оно на скрине то все правильно срабатывает ... http://c2n.me/3GABbkp - всьо верно! 2) когда же фильтровать сначала по "возрасту", а затем по количеству то он показывает то же http://c2n.me/3GABihc, ето не верно... а должен показывать элементы, которые отвечают только конкретному возрасту, в нашем случае это "7", а показывает все элементы, этот блок 5 лет не должен отображаться - так как в фильтре стоит 7 надеюсь так будет понятнее :) |
zerofx,
нет не понятно, x == 7 и x <= 7 , это разные фильтры можно только один вариант, хотите иначе придумывайте алгоритм. |
Цитата:
|
Цитата:
алгоритм правильный .. а если вынести на отдельный скрипт + data_atr ? именно фильтрацию по количеству элементов? грубо, но главное чтобы работало ... или вы думаете это не вариант? |
Цитата:
|
|
Цитата:
Все таки здоровый сон многое решает ... :) Решение банально простое - но так как я себя накрутил я о нем забыл, как всегда все было под носом .. :-/ if - else - решили все!
$(document).ready(function() {
var b = $("[data-element]");
console.log(b.length);
$("select").change(function() {
var a = $("#age").val(),
d = $("#size").val(),
e = $("#parts").val(),
f = $("#paste").val(),
c = [a, d, e, f];
b.hide().filter(function(a, b) {
return $(b).data("element").every(function(b, a) {
if (a == 1) {
console.log('--1--');
return !c[a] ||(b == +b && +c[a] >= +b) || b == c[a]
}
else {
console.log('--2--');
return !c[a] || c[a] == b
}
})
}).show()
})
});
если значение возраста не равно true - то есть пустое значение (false) выполняется один фильтр, а если равно true - то есть значение возраста не пустое то выполняем другой вильтр вот и проблеме конец! :dance: :victory: я благодарю Вас за терпение и помощь =) Без Вас бы ничего не получилось ... Если можно спросить о методе "filter" - это метод js а не JQuery я правильно понял? потому что все что нашел ведет к методу each... |
|
| Часовой пояс GMT +3, время: 01:48. |