Как реализовать фильтр?
Добрый день. Есть разметка. Упрощенно выглядит так:
<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: Все отменно работает. Последний вопрос. При клике по элементу одного из списка (не важно, первый или второй), нужно сделать неактивными остальные элементы из этого же списка.
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:39. |