jQuery, Switch-Case 以显示具有相同类的多个选定选项答案

【问题标题】：jQuery, Switch-Case to Show Multiple Selected Options With the Same ClassjQuery, Switch-Case 以显示具有相同类的多个选定选项
【发布时间】：2017-05-28 13:18:40
【问题描述】：

如果该类只有 1 个元素 (<tr>)，则以下 jQuery 代码仅显示选定的选项，但如果该类有多个元素，则所有元素都被隐藏。需要改变什么？

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

【问题讨论】：

因为siblings() 在没有兄弟元素的情况下调用时会选择任何兄弟元素，即使是原始选择器中的元素（siblings() 不知道）。例如，您可能希望删除任何类似 .siblings(':not(.lifestyle)') 的内容。或者反转它并先隐藏，然后显示。这可能更容易。
像这样：jsfiddle.net/kd07q3bb 与这样：jsfiddle.net/kd07q3bb/1
感谢您的建议！添加 ':not(.__)' 有效！你让我今天一整天都感觉很好。 @Jared Farrish

标签： jquery select switch-statement

【解决方案1】：

最简单的方法是反转它：隐藏，然后显示。

$(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;
    }
  });
});

【讨论】：

【解决方案2】：

您可以将 .each 用于具有相同选择器的元素：

$(".family").each(function(index,element){
  element.hide();
})

【讨论】：

这完全没有必要，也不能解决问题。
谢谢！我得试试这个。这看起来是一种更有效的方式。