All geek questions in one place

Hide / show li elements based on the selected category filter

I have a list of li elements whose categories have been added to the class. 1 means that it is associated with this category, 0 means that it is not. The first time you visit the page, they all appear "View All." By clicking "Fruits", you will see all the items that have "fruit-1". By clicking "View All", you will see ALL items.

Filter by:

<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>

What should I do with these elements (add classes or an identifier or something else) to do this, when I click on a category, only those that belong to this category appear? and the rest are hidden?

+4
source share
6

: , . .

$(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>
Hide result
+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();
    })
})
0

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>
Hide result
0

$('.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>
Hide result
0

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/

0

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

Let me know if this is helpful.

0
source

Source: https://habr.com/ru/post/1605678/

More articles:


All Articles