Фильтр с выбором значений параметров - PullRequest
Новая
       11

Фильтр с выбором значений параметров

0 голосов
/ 26 декабря 2018

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

$('#categories').change(function() {
  var val = $(this).val();
  if (val == "makeup") {
    $('.makeup').fadeIn();
  } else {
    $(".makeup").not('.' + value).fadeOut();
    $('.makeup').filter('.' + value).fadeIn();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="makeup">
  Div 1
</div>
<div class="makeup">
  Div 2
</div>
<div class="makeup">
  Div 3
</div>
<div class="other">
  Div 4
</div>

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Этот код работает в соответствии с запросом, я только что добавил класс .category-option к элементам, в которые вы попадаете и исчезаете.

Демо 

$('#categories').change(function() {

  // Get value of selected option
  var val = $(this).children("option:selected").val();

  // Fadeout all that are not linked
  $(".category-option").fadeOut();

  // Fade in appropriate options
  $(".category-option." + val).fadeIn();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="category-option makeup">
  Div 1
</div>
<div class="category-option makeup">
  Div 2
</div>
<div class="category-option makeup">
  Div 3
</div>
<div class="category-option other">
  Div 4
</div>
0 голосов
/ 26 декабря 2018
  • Поместите общий класс "category" на все div.
  • Свяжите обработчик изменений с выбором
  • Когда он изменится, fadeOut все опции и fadeIn текоторые соответствуют значению как классу 

$('#categories').on('change', function(e) {
  $('.category')
    .fadeOut()
    .filter('.'+ e.target.value)
    .fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="category makeup">
  Div 1
</div>
<div class="category makeup">
  Div 2
</div>
<div class="category makeup">
  Div 3
</div>
<div class="category other">
  Div 4
</div>
...