Следующий код jQuery работает для показа только выбранной опции, если в этом классе только 1 элемент (<tr>), но все они скрыты, если в классе есть несколько элементов. Что нужно изменить?

$(document).ready(function() {
  $("#genre").change(function() {
    var id = $(this).find("option:selected").attr("id");
    switch (id) {
      case "opt_all":
        $("tr").show();
        break;
      case "opt_family":
        $(".family").show().siblings().hide();
        break;
      case "opt_life":
        $(".lifestyle").show().siblings().hide();
        break;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='genre' id='genre'>
      <option id='opt_all' selected='selected'>All Genre</option>
      <option id='opt_family'>Family &amp; Friends</option>                
      <option id='opt_life'>Lifestyle</option>    
    </select>
<table>
  <tr class="family"></tr>
  <tr class="life"></tr>
  <tr class="family"></tr>
</table>
0
isosmall 28 Май 2017 в 16:18

2 ответа

Лучший ответ

Самый простой способ - перевернуть его: спрятать, затем показать.

$(document).ready(function() {
  $("#genre").change(function() {
    var id = $(this).find("option:selected").attr("id");
    switch (id) {
      case "opt_all":
        $(this).show();
        break;
      case "opt_family":
        $('.tr').hide().filter(".family").show();
        break;
      case "opt_life":
        $('.tr').hide().filter(".lifestyle").show();
        break;
    }
  });
});

Или отмените его при выборе фильтра siblings(), чтобы исключить то, над чем вы только что работали:

$(document).ready(function() {
  $("#genre").change(function() {
    var id = $(this).find("option:selected").attr("id");
    switch (id) {
      case "opt_all":
        $("tr").show();
        break;
      case "opt_family":
        $(".family").show().siblings(':not(.family)').hide();
        break;
      case "opt_life":
        $(".lifestyle").show().siblings(':not(.lifetyle)').hide();
        break;
    }
  });
});
0
Jared Farrish 28 Май 2017 в 13:35

Вы можете использовать .each для элементов с таким же селектором:

$(".family").each(function(index,element){
  element.hide();
})
-1
Morteza Fathnia 28 Май 2017 в 13:26