Как реализовать фильтр?
Добрый день. Есть разметка. Упрощенно выглядит так:
<div id="ex-filter"> <div class="ex-type"> <ul> <li class="col-md-6" data-id="1" data-children="11, 12, 13"><a href="#">Актив</a> (4)</li> <li class="col-md-6" data-id="2" data-children="12, 14"><a href="#">Пассив</a> (2)</li> </ul> </div> <div class="ex-ex"> <ul> <li class="col-md-6" data-id="11" data-parent="1"><a href="#">Горы</a> (4)</li> <li class="col-md-6" data-id="12" data-parent="2"><a href="#">Лес</a> (2)</li> <li class="col-md-6" data-id="13" data-parent="2"><a href="#">Пляж</a> (2)</li> <li class="col-md-6" data-id="14" data-parent="1, 2"><a href="#">Море</a> (2)</li> </ul> </div> <button class="ex-go">Фильтровать</button> </div> Нужно на jQuery реализовать фильтр. Разумеется, количество пунктов - заведомо не известно, что в первом, что во втором списке. Работает так: кликаю по пункту "Актив", "Пассив" деактивируется (да и вообще все элементы из этого-же списка, если они есть). Скрипт анализирует во втором списке data-parent, сравнивает с data-id элемента по которому кликнули, и если в data-parent из второго списка нет data-id из первого списка, он тоже деактивируется (то есть "Лес" и "Пляж" в данном случае деактивируются(я думаю, просто на css сделать через динамическое добавление класса)). Повторное нажатие по этому же пункту списка, возвращает все назад. Подскажите, как это реализовать. :( |
Янковиц,
data-children зачем? |
Для обратной совместимости. Тот же принцип, только при нажатии на элементы второго списка, фильтруются элементы первого. Не исключаю, что они лишние. Просто, решил предоставить всё возможное, чтобы быстро решить проблему.
|
Цитата:
|
открывашка фильтр
:write: тут будет очередная открывашка :lol:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .act, .act a{ background-color: rgba(0, 0, 255, 1); color: rgba(255, 255, 255, 1); } .ex-ex .act, .ex-ex .act a{ background-color: rgba(255, 250, 205, 1); color: rgba(139, 69, 19, 1); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var parent = $(".ex-type li"), child = $(".ex-ex li"); parent.on("click", function(event) { event.preventDefault(); var el = $(this); if(parent.not(el).is(".act")) return; parent.not(el.toggleClass("act")).removeClass("act"); var id = el.data("id") + ""; child.removeClass("act"); if (el.is(".act")) child.filter(function() { var data = $(this).data("parent"); data = (data + "").split(/\s*,\s*/); return data.indexOf(id) !== -1 }).addClass("act"); }) child.on("click", function(event) { event.preventDefault(); var el = $(this); if(child.not(el).is(".act")) return; child.not(el.toggleClass("act")).removeClass("act"); var data = $(this).data("parent"); data = (data + "").split(/\s*,\s*/); parent.removeClass("act"); if (el.is(".act")) parent.filter(function() { var id = $(this).data("id") + ""; return data.indexOf(id) !== -1 }).addClass("act"); }) }); </script> </head> <body> <div id="ex-filter"> <div class="ex-type"> <ul> <li class="col-md-6" data-id="1" data-children="11, 12, 13"><a href="#">Актив</a> (4)</li> <li class="col-md-6" data-id="2" data-children="12, 14"><a href="#">Пассив</a> (2)</li> </ul> </div> <div class="ex-ex"> <ul> <li class="col-md-6" data-id="11" data-parent="1"><a href="#">Горы</a> (4)</li> <li class="col-md-6" data-id="12" data-parent="2"><a href="#">Лес</a> (2)</li> <li class="col-md-6" data-id="13" data-parent="2"><a href="#">Пляж</a> (2)</li> <li class="col-md-6" data-id="14" data-parent="1, 2"><a href="#">Море</a> (2)</li> </ul> </div> <button class="ex-go">Фильтровать</button> </div> </body> </html> |
В смысле, что обратная зависимость. Прошу прощения за неточность. При нажатии на элементы второго списка, фильтруются элементы первого.
|
Янковиц,
код выше |
Цитата:
|
Спасибо большое. :dance: :thanks: Все отменно работает. Последний вопрос. При клике по элементу одного из списка (не важно, первый или второй), нужно сделать неактивными остальные элементы из этого же списка.
|
Цитата:
|
Я имею в виду, чтобы на их невозможно было нажать курсором. Думаю, что лучше к ним добавить css класс, чтобы управлять цветом.
|
Цитата:
|
Спасибо, и все же, как с добавлением-удалением классов сделать неактивность?
|
Янковиц,
:( <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .act, .act a{ background-color: rgba(0, 0, 255, 1); color: rgba(255, 255, 255, 1); } .ex-ex .act, .ex-ex .act a{ background-color: rgba(255, 250, 205, 1); color: rgba(139, 69, 19, 1); } .noclick{ pointer-events: none; opacity: .4; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var parent = $(".ex-type li"), child = $(".ex-ex li"); parent.on("click", function(event) { event.preventDefault(); var el = $(this); parent.not(el.toggleClass("act")).removeClass("act noclick"); var id = el.data("id") + ""; child.removeClass("act"); if (el.is(".act")) { child.filter(function() { var data = $(this).data("parent"); data = (data + "").split(/\s*,\s*/); return data.indexOf(id) !== -1 }).addClass("act"); parent.not(el).addClass("noclick"); } }).filter(".act").removeClass("act").click(); child.on("click", function(event) { event.preventDefault(); var el = $(this); child.not(el.toggleClass("act")).removeClass("act noclick"); var data = $(this).data("parent"); data = (data + "").split(/\s*,\s*/); parent.removeClass("act"); if (el.is(".act")) { parent.filter(function() { var id = $(this).data("id") + ""; return data.indexOf(id) !== -1 }).addClass("act"); child.not(el).addClass("noclick"); } }) }); </script> </head> <body> <div id="ex-filter"> <div class="ex-type"> <ul> <li class="col-md-6 act" data-id="1" data-children="11, 12, 13"><a href="#">Актив</a> (4)</li> <li class="col-md-6" data-id="2" data-children="12, 14"><a href="#">Пассив</a> (2)</li> </ul> </div> <div class="ex-ex"> <ul> <li class="col-md-6" data-id="11" data-parent="1"><a href="#">Горы</a> (4)</li> <li class="col-md-6" data-id="12" data-parent="2"><a href="#">Лес</a> (2)</li> <li class="col-md-6" data-id="13" data-parent="2"><a href="#">Пляж</a> (2)</li> <li class="col-md-6" data-id="14" data-parent="1, 2"><a href="#">Море</a> (2)</li> </ul> </div> <button class="ex-go">Фильтровать</button> </div> </body> </html> |
Спасибо большое. Прошу прощения, что снова поднимаю свой вопрос.
Необходимо при загрузки вебстраницы запускать скрипт и проверять, есть ли активные элементы. Делаю так: $(function() { var parent = $(".ex-type li"), child = $(".ex-ex li"); function parent_filter( parent ) { event.preventDefault(); var el = $(this); parent.not(el.toggleClass("act")).removeClass("act noclick"); var id = el.data("id") + ""; child.removeClass("act"); if (el.is(".act")) { child.filter(function() { var data = $(this).data("parent"); data = (data + "").split(/\s*,\s*/); return data.indexOf(id) !== -1 }).addClass("act"); parent.not(el).addClass("noclick"); } } function children_filter( child ) { event.preventDefault(); var el = $(this); child.not(el.toggleClass("act")).removeClass("act noclick"); var data = $(this).data("parent"); data = (data + "").split(/\s*,\s*/); parent.removeClass("act"); if (el.is(".act")) { parent.filter(function() { var id = $(this).data("id") + ""; return data.indexOf(id) !== -1 }).addClass("act"); child.not(el).addClass("noclick"); } } parent.on("click", function(event) { var _this = jQuery(this); parent_filter(_this); }) child.on("click", function(event) { var _this = jQuery(this); children_filter(_this); }) }); Однако, фильтр перестает работать. Подскажите, что я делаю не так? Проверял в console.log Почему-то, _this возвращает не DOM элемент. |
Соответственно
jQuery(window).on('load', function() { parent_filter(); children_filter(); }); Тоже не работает |
Янковиц,
что такое "активный элемент" и что нужно сделать, если есть "активный элемент"? |
Активный элемент, это элемент в котором есть класс act
|
Ранее, в предыдущем коде была выполнена фильтрация при клике по элементам. Теперь к этому нужно еще добавить: если пользователь переходит сразу на страницу, где уже есть "активный элемент" с классом act, необходимо, чтобы скрипт, без кликанья автоматически выполнялся.
|
Цитата:
пост №14 строка 41 |
Наверно я не так выразился.
Постараюсь описать: пользователь заходит на страницу. Средствами php в один из элементов фильтра вставляется класс act. Мне нужно просто как бы эмулировать клик при загрузке страницы. Скрипт должен проанализировать фильтр, если есть элемент с классом act (в одном из блоков или в обоих сразу), скрипт выполняет то же самое, как если бы по элементу кликнули. P.S. я попробовал 41 строку, но ничего не поменялось :( |
Янковиц,
здесь 41 строка работает? класс стоит в элементе на строке 65 |
Часовой пояс GMT +3, время: 19:46. |