Отобразить контент jquery

272

21 марта 2017, 10:59

Изначально отображается всё. По нажатию на определенную категорию отображаются нужные нам товары. Нужен наиболее оптимальный способ

Answer 1

Самый простой способ:

var category = function(cat) { 
 
  $('[data-category]').each(function() { 
    var _cat = String( $(this).data('category') ); 
     
    if( cat === 'null' || cat === _cat){ 
      $(this).removeClass('hide'); 
    }else if( cat !== _cat ){ 
      $(this).addClass('hide'); 
    }; 
  }); 
}; 
 
$('a').click(function() { 
  var cat = $(this).attr('href'); 
   
  category( cat ); 
   
  return false; 
});

.hide {opacity: 0.4}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div> 
  <a href="null">Все</a> 
  <a href="0">Категория 0</a> 
  <a href="1">Категория 1</a> 
  <a href="2">Категория 2</a> 
</div> 
 
<p data-category="0">Категория 0</p> 
<p data-category="1">Категория 1</p> 
<p data-category="1">Категория 1</p> 
<p data-category="0">Категория 0</p> 
<p data-category="2">Категория 2</p> 
<p data-category="2">Категория 2</p> 
<p data-category="0">Категория 0</p> 
<p data-category="1">Категория 1</p> 
<p data-category="0">Категория 0</p>