Скрыть/показать элементы li на основе выбранной категории фильтра

Question

У меня есть список предметов li, чьи категории были добавлены в класс. 1 означает, что он связан с этой категорией, 0 означает, что это не так. При первом посещении страницы все они появятся «Просмотреть все». Нажав «Фрукты», вы увидите все предметы, в которых есть «фрукты-1». Нажав «Просмотреть все», вы увидите ВСЕ предметы.

Фильтр:

<ul> 

<li><a href="">View All</a></li> 
<li><a href="">Fruits</a></li> 
<li><a href="">Vegetables</a></li> 
<li><a href="">Nuts</a></li> 
<li><a href="">Desserts & Cakes</a></li> 

</ul> 

<ul> 
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li> 
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li> 
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li> 
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li> 
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li> 
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li> 
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li> 
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li> 
</ul> 

Что я должен сделать, чтобы эти пункты (добавить классы или идентификаторы или что угодно), чтобы сделать это так, когда я нажимаю категорию, только те, которые принадлежат к этой категории появляются? а остальные скрыты?

Answer 1

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

$(function(){ 
 
    $('ul li a').click(function(e){ 
 
    e.preventDefault(); 
 
    var category = $(this).text().toLowerCase().split("&"); 
 
    if(category[0]=="view all") 
 
    { 
 
     $('ul.category li').show(); 
 
    } 
 
    else 
 
    { 
 
     //hide all categories 
 
     $('ul.category li').hide(); 
 
     $.each(category, function(i, v){ 
 
     $('ul.category li.'+v.trim()+"-1").show(); 
 
     }); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul> 
 

 
<li><a href="">View All</a></li> 
 
<li><a href="">Fruits</a></li> 
 
<li><a href="">Vegetables</a></li> 
 
<li><a href="">Nuts</a></li> 
 
<li><a href="">Desserts & Cakes</a></li> 
 

 
</ul> 
 

 
<ul class="category"> 
 
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li> 
 
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li> 
 
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li> 
 
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li> 
 
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li> 
 
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li> 
 
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li> 
 
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li> 
 
</ul>

Answer 2

Пусть у вас есть этот

<ul class="listed-values"> 

    <li class="fruit,veg,nuts,drink">Product 1</li> 
    <li class="drink">Product 2</li> 
    <li class="veg,nuts,drink">Product 3</li> 
    <li class="veg,nuts">Product 4</li> 

</ul> 

и это один

<ul class="filter-ul"> 

    <li><a href="">Fruit</a></li> 
    <li><a href="">Veg</a></li> 
    <li><a href="">Nuts</a></li> 
    <li><a href="">Drink</a></li> 

</ul> 

Вот JQuery код

$(document).ready(function(){ 
    $(".filter-ul li a").click(function(){ 
     var text = $(this).text().toLowerCase(); 
     $('ul.listed-values li').hide(); 
     $('ul.listed-values li').filter(function(){ 
      return $(this).attr('class').indexOf(text) != -1; 
     }).show(); 
    }) 
}) 

Answer 3

Добавить атрибут data-category для каждого фильтра, чтобы указать, какую категорию он должен отображать. Затем используйте это в селекторе, чтобы он соответствовал классу продуктов.

Правильный способ разделения нескольких классов - это пробелы, а не запятые.

$("#filters a").click(function() { 
 
    var category = $(this).data("category"); 
 
    $("#products li").hide(); 
 
    $("#products li." + category).show(); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="products"> 
 

 
    <li class="fruit veg nuts drink">Product 1</li> 
 
    <li class="drink">Product 2</li> 
 
    <li class="veg nuts drink">Product 3</li> 
 
    <li class="veg nuts">Product 4</li> 
 

 
</ul> 
 

 
Filter by: 
 

 
<ul id="filters"> 
 

 
    <li><a href="" data-category="fruit">Fruit</a> 
 
    </li> 
 
    <li><a href="" data-category="veg">Veg</a> 
 
    </li> 
 
    <li><a href="" data-category="nuts">Nuts</a> 
 
    </li> 
 
    <li><a href="" data-category="drink">Drinks</a> 
 
    </li> 
 

 
</ul>

Answer 4

$('.links li a').on('click',function(e){ 
 
    e.preventDefault(); 
 
    var className = $(this).text().toLowerCase(); 
 
    $(".content li").not('.' + className).hide(); 
 
    $(".content li" + "." + className).show(); 
 
})

.content li{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="links"> 
 
    <li><a href="">Fruit</a> </li> 
 
    <li><a href="">Veg</a> </li> 
 
    <li><a href="">Nuts</a></li> 
 
    <li><a href="">Drinks</a></li> 
 
</ul> 
 
<ul class="content"> 
 
    <li class="fruit veg nuts drinks">Product 1</li> 
 
    <li class="drinks">Product 2</li> 
 
    <li class="veg nuts drinks">Product 3</li> 
 
    <li class="veg nuts">Product 4</li> 
 
</ul>

Answer 5

В html классы разделены пробелами не с запятой.

HTML код:

<ul class="products"> 
    <li class="fruit veg nuts drink">Product 1</li> 
    <li class="drink">Product 2</li> 
    <li class="veg nuts drink">Product 3</li> 
    <li class="veg nuts">Product 4</li> 
</ul> 

<ul> 
    <li><a href="" class='category'>Fruit</a></li> 
    <li><a href="" class='category'>Veg</a></li> 
    <li><a href="" class='category'>Nuts</a></li> 
    <li><a href="" class='category'>Drinks</a></li> 
</ul> 

JS код:

$(function() { 
    $(".category").on("click", function(e) { 
     e.preventDefault(); 
     var products = $(".products").find("li"); 
     products.show(); 

     var cat = $(this).text(); 
     products.not('.'+cat.toLowerCase()).hide(); 
    }); 
}); 

Вы можете найти рабочую демо здесь: http://jsfiddle.net/crL054px/

Answer 6

Попробуйте

JS Fiddle здесь http://jsfiddle.net/cfzdq7f7/

HTML

<ul> 

<li class="fruit veg nuts drink">Product 1</li> 
<li class="drink">Product 2</li> 
<li class="veg nuts drink">Product 3</li> 
<li class="veg nuts">Product 4</li> 

</ul> 


<ul> 

<li class="category">Fruit</li> 
<li class="category">Veg</li> 
<li class="category">Nuts</li> 
<li class="category">Drinks</li> 

</ul> 

Javascript

$(document).ready(function() { 
    $(".category").click(function() { 
     if($(this).html() == "Fruit") { 
     $(".veg").hide(); 
     $(".nuts").hide(); 
     $(".drink").hide(); 
     $(".fruit").show(); 
     } else if($(this).html() == "Veg") { 
     $(".fruit").hide(); 
     $(".nuts").hide(); 
     $(".drink").hide(); 
     $(".veg").show(); 
     } else if($(this).html() == "Nuts") { 
     $(".fruit").hide(); 
     $(".veg").hide(); 
     $(".drink").hide(); 
     $(".nuts").show(); 
     } else if($(this).html() == "Drinks") { 
     $(".fruit").hide(); 
     $(".nuts").hide(); 
     $(".veg").hide(); 
     $(".drink").show(); 
     } 
    }); 

}); 

CSS

.fruit, .veg, .nuts, .drink { 
    display:none; 
} 
.category { 
    cursor:pointer; 
} 

Позвольте мне знать, если это полезно