активный класс по умолчанию для списка тегов

Question

Приветствие, сообщество переполнения стека. Я пытаюсь создать трехэтапный список тегов фильтров и его работу, проблема, которую я не могу понять, - это сделать видимым, какой тег выбран в настоящий момент.

Фьючерсы, которые я в настоящее время не понимаю, - это установить по умолчанию все теги в каждом списке и включить возможность отображения выделенного тега в каждом списке, теперь он выбирает только 1 из всех 3 списков.

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/

Answer 1

Вашего CSS имеет небольшую ошибку, вы добавляете/удаление selected класса, так что вы должны использовать:

li a.selected { 
    color: blue; 
} 

простым способ убедиться, что все значения первоначально выбраны простой установка их классы в html до selected. См. Также эту скрипку: https://jsfiddle.net/22vh08ah/7/.

Answer 2

$.each() Попробуйте заменить петлю для $('.item.'+ selector.join('.')).show();, добавив else заявление на .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() 
 
     }) 
 
     // \t $('.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/