07.06.2018, 13:03
|
|
Профессор
|
|
Регистрация: 17.11.2014
Сообщений: 403
|
|
|
Как реализовать фильтр?
Добрый день. Есть разметка. Упрощенно выглядит так:
<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 сделать через динамическое добавление класса)). Повторное нажатие по этому же пункту списка, возвращает все назад.
Подскажите, как это реализовать. 
Последний раз редактировалось Янковиц, 07.06.2018 в 13:08.
|
|
07.06.2018, 13:07
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Янковиц,
data-children зачем?
|
|
07.06.2018, 13:09
|
|
Профессор
|
|
Регистрация: 17.11.2014
Сообщений: 403
|
|
|
Для обратной совместимости. Тот же принцип, только при нажатии на элементы второго списка, фильтруются элементы первого. Не исключаю, что они лишние. Просто, решил предоставить всё возможное, чтобы быстро решить проблему.
|
|
07.06.2018, 13:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от Янковиц
|
|
Для обратной совместимости.
|
не осилил |
|
07.06.2018, 13:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
открывашка фильтр
 тут будет очередная открывашка 
<!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>
Последний раз редактировалось рони, 07.06.2018 в 15:08.
|
|
07.06.2018, 13:14
|
|
Профессор
|
|
Регистрация: 17.11.2014
Сообщений: 403
|
|
|
В смысле, что обратная зависимость. Прошу прощения за неточность. При нажатии на элементы второго списка, фильтруются элементы первого.
|
|
07.06.2018, 13:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Янковиц,
код выше
|
|
07.06.2018, 13:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от Янковиц
|
|
При нажатии на элементы второго списка, фильтруются элементы первого.
|
добавил, логику кликов, если нужно, уточните сами. |
|
07.06.2018, 14:04
|
|
Профессор
|
|
Регистрация: 17.11.2014
Сообщений: 403
|
|
Спасибо большое.   Все отменно работает. Последний вопрос. При клике по элементу одного из списка (не важно, первый или второй), нужно сделать неактивными остальные элементы из этого же списка. |
|
07.06.2018, 14:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от Янковиц
|
|
нужно сделать неактивными остальные элементы из этого же списка.
|
не понимаю, разве сейчас не так? |
|
|
|
