活动类默认为标签列表

active class by default to tag list

本文关键字：标签 列表 默认 活动      更新时间：2023-09-26

问候，栈溢出社区。我试图创建三阶段过滤器标签列表及其工作，我无法弄清楚的问题是如何使当前选择的标签可见。

我目前无法理解的未来是如何在默认情况下在每个列表中设置"所有"标签，并启用在每个列表中显示选定标签的可能性，现在它从所有3个列表中只选择1个。

<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');
});

小提琴:https://jsfiddle.net/22vh08ah/6/

你的css有一个小错误，你正在添加/删除selected类，所以你应该使用:

li a.selected {
    color: blue;
}

确保All值最初被选中的简单方法是简单地在html中将它们的类设置为selected。

尝试将$.each() loop替换为$('.item.'+ selector.join('.')).show();，将else语句添加到at .each()，将selector[0]设置为"all"，如果selector[0]为"all"则显示所有.item元素;也调整了css以下@Tgys

$("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);
        } else {
          selector = [$this.data("value")]
        }
      });
    $(".item")
      .hide();
    if (selector.length && selector[0] !== "all") {
      $.each(selector, function(k, v) {
          $("." + v).show()
        })
        //	$('.item.'+ selector.join('.')).show();
    } else {
      $(".item")
        .show();
    }
  });
li a.selected {
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<h2>Composition</h2> 
<ul class="filter" id="composition">
    <li><a data-value="all" class="selected">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>

jsfiddle https://jsfiddle.net/22vh08ah/8/

相关文章：