Я имею в виду, чтобы на их невозможно было нажать курсором. Думаю, что лучше к ним добавить 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 |
| Часовой пояс GMT +3, время: 23:01. |