问候,堆栈溢出社区。我正在尝试创建三阶段过滤器标签列表及其工作,我无法弄清楚的问题是如何使当前选择的标签可见。
我目前无法理解的 future 是如何默认在每个列表中设置“全部”标签,并启用在每个列表中显示所选标签的可能性,现在它只从所有 3 个列表中选择 1 个。
HTML
<h2>Composition</h2>
<ul class="filter" id="composition">
<li><a data-value="all">All</a> </li>
<li><a data-value="landscape">Landscape</a></li>
<li><a data-value="portait">Portait</a> </li>
<li><a data-value="square">Square</a> </li>
</ul>
<h2>People</h2>
<ul class="filter" id="people">
<li><a data-value="all">All</a> </li>
<li><a data-value="people">People</a></li>
<li><a data-value="nopeople">No People</a></li>
</ul>
<h2>Theme</h2>
<ul class="filter" id="theme">
<li><a data-value="all">All</a> </li>
<li><a data-value="Nature">Nature</a></li>
<li><a data-value="Fashion">Fashion</a></li>
<li><a data-value="Mountains">Mountains</a></li>
<li><a data-value="Sea">Sea</a></li>
</ul>
<h2>Data to filter</h2>
<ul>
<li class="item landscape people Nature">landscape people Nature</li>
<li class="item portait nopeople Fashion">portait nopeople Fashion</li>
<li class="item landscape people Mountains">landscape people Mountains</li>
<li class="item portait people Sea">portait people Sea</li>
<li class="item square people Mountains">square people Mountains</li>
<li class="item landscape people Fashion">landscape people Fashion</li>
<li class="item square nopeople Sea">square nopeople Sea</li>
<li class="item landscape nopeople Mountains">landscape nopeople Mountains</li>
<li class="item portait people Fashion">portait people Fashion</li>
<li class="item square nopeople Sea">square nopeople Sea</li>
</ul>
CSS
li a.active {
color: blue;
}
JavaScript
$("ul.filter li a")
.on('click', function() {
var $this = $(this);
$this
.closest('ul')
.find('a')
.removeClass('selected');
$this
.addClass('selected');
var selector = [];
$('ul li a.selected')
.each(function() {
var selectedValue = $(this).data('value');
if (selectedValue !== 'all') {
selector.push(selectedValue);
}
});
$(".item")
.hide();
if (selector.length) {
$('.item.'+ selector.join('.')).show();
} else {
$(".item")
.show();
}
});
$("ul.filter li a").on('click', function(){
$("ul.filter li a").removeClass('active');
$(this).addClass('active');
});
fiddle :https://jsfiddle.net/22vh08ah/6/
最佳答案
你的 css 有一个小错误,你正在添加/删除 selected
类,所以你应该使用:
li a.selected {
color: blue;
}
确保初始选择所有值的一种简单方法是简单地将它们在 html 中的类设置为 selected
。另请参阅此 fiddle :https://jsfiddle.net/22vh08ah/7/ .
关于javascript - 事件类默认为标签列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32680960/