Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.12.2016, 18:07
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

фильтр на data-атрибутах
Привет всем, так произошло что нужно организовать фильтр блоков через select

В div блоков есть data-атрибут, а имено data-element, у которого есть 3ры параметры:

возраст - "5",
количество деталей - "100",
с или без колесом - "without"


+ собрал data-атрибуты в массив.

Задача такая - каждый select передает в переменную свой параметр, сейчас так и есть.

Вот здесь и начинается проблема, как сравнить то, что есть в массиве (а именно с конкретным дата атрибутом блока содержащийся в массиве) с тем, что передается в переменную через select (по одной переменной).

и если есть совпадение то передать ему класс success.


Буду очень благодарен за помощь!!!

https://jsfiddle.net/zerofx/ug7cbLyj/2/ - пример того что есть
Ответить с цитированием
  #2 (permalink)  
Старый 22.12.2016, 19:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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/
Ответить с цитированием
  #3 (permalink)  
Старый 23.12.2016, 12:27
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

очень элегантное решение!
Спасибо Вам!
Вы как всегда на высоте!
Ответить с цитированием
  #4 (permalink)  
Старый 19.01.2017, 03:22
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

Извиняюсь но возник вопрос - захотел изменить немного работу фильтра, а именно в части количество ..

Сейчас она выводит именно то количество которое указано в дата атрибуте, но немного не удобно, решил немного его изменить а именно чтобы выводило не конкретное число а по условию равно или меньше значение которое задано в селекте.

так все таки удобнее - можно увидеть больше элементов похожих друг на друга...

$(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()
   })
});
Ответить с цитированием
  #5 (permalink)  
Старый 19.01.2017, 03:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от zerofx
по условию равно или меньше значение которое задано в селекте.
https://jsfiddle.net/ug7cbLyj/10/

return !c[a] ||(b == +b && +c[a] >= +b) || b == c[a]

Последний раз редактировалось рони, 19.01.2017 в 03:46.
Ответить с цитированием
  #6 (permalink)  
Старый 19.01.2017, 20:04
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

Благодарю за помощь!
Но заметил 1н момент - если фильтрую по количеству деталей, даже если выставлен фильт "количество" - тогда подтягивает блоки с разным возрастом, то есть все блоки которые попадают в диапазон ...

на практике он должен был подтягивать как было с самого начала, только один конкретный возраст

пробовал поменять условие но никак не могу сделать, чтобы подтягивало

+ добавил еще один фильтр "Вставки" (селект) - они перестали работать ...

https://jsfiddle.net/ug7cbLyj/12/
Ответить с цитированием
  #7 (permalink)  
Старый 19.01.2017, 20:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от zerofx
добавил еще один фильтр "Вставки" (селект) - они перестали работать ...
не добавили!!! и data ошибка data-element='["6","10s00","without","pasyes"]'>

https://jsfiddle.net/ug7cbLyj/14/
строки 7 и 8 переменная f
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2017, 21:32
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

не тот код скопировал ... запара =( ...

но http://c2n.me/3GApQpR - фильтр все равно подтягивает элементы по возрасту
Ответить с цитированием
  #9 (permalink)  
Старый 19.01.2017, 22:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

zerofx,
не вижу проблемы - всё на картинке соответствует выбранным параметрам, везде возраст меньше или равно 7 и количество меньше или равно 1000
Ответить с цитированием
  #10 (permalink)  
Старый 19.01.2017, 22:21
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 08.11.2013
Сообщений: 78

Сообщение от рони Посмотреть сообщение
zerofx,
не вижу проблемы - всё на картинке соответствует выбранным параметрам, везде возраст меньше или равно 7 и количество меньше или равно 1000
нет нет возможно не так объяснил.

Сейчас логика фильтра просто замечательная, только если явно выбран фильтр как на скрине лет то он должен показать только блоки с дата атрибутом 7, и так далее ежели 5 то 5 ...

а сейчас он отображает все блоки по условию меньше или равно ...

то как он работает сейчас правильно если не выбран первый филь "возраст" - но ежели он вибран - то отображает блоки с нужним возрастом + условие меньше или равно - для количества элементов
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Загрузка процесса при отрисовке изображения slovnosvoboda Общие вопросы Javascript 3 20.05.2016 13:56
Прошу раскритиковать наслойку работы с MySql. Alasdair Node.JS 4 21.11.2015 20:06
Fast-AJAX - быстрая библа для аякса KosBeg Ваши сайты и скрипты 22 20.06.2015 21:32
Упростить код Nifler Общие вопросы Javascript 4 12.06.2015 17:29
вопрос по видимости переменных. yiooxir Angular.js 3 31.10.2013 12:37