javascript - 根据下拉菜单中选择的项目隐藏所有元素

Question

这是我的 html:

<div id="drinks">
    <select id="test">
        <option data-tab="Coffee">Coffee</option>
        <option data-tab="Cold Drinks">Cold Drinks</option>
        <option data-tab="Hot Drinks">Hot Drinks</option>
    </select>
    <div class="section-wrapper">
        <div class="row">
            <section class="Coffee">
                <h3>Coffee </h3>
                <h4>Coffee Flavor</h4>
            </section>
        </div>
        <div class="row">
            <section class="Cold Drinks">
                <h3>Cold Drink</h3>
                <h4>Cold Drink</h4>
            </section>
        </div>
        <div class="row">
            <section class="Hot Drinks">
                <h3>Hot Drink</h3>
                <h4>Hot Drink</h4>
            </section>
        </div>
    </div>
</div>

Javascript 代码:

$(document).ready(function() {
    $("#test").on('load change', function() {  
        $("#test option").each(function() {
            $("#drinks ." + $(this).val()).hide();
        })
        $("#drinks ." + $(this).val()).show();
    }).change();
});

我只想显示与下拉数据选项卡值匹配的类。因此，如果选择了咖啡，则只应显示咖啡的 h3 和 h4 标签。其他下拉菜单也类似。我究竟做错了什么 ？这是我的 fiddle 的链接。

https://jsfiddle.net/mmaharjan/onbusdhv/

Answer 1

您需要对标记进行一些更改以使其变得简单。

就像在option 中使用value 来存储选项的值一样，也在section 中使用属性来存储类型。如果您在选项中使用value，您可以通过读取select 的值轻松获取当前值。如果您在 部分 中使用类，则 [space] 被视为类中的分隔符，因此 Cold Drinks 将表示 2 个类 Cold 和 Drinks，所以使用属性选择器会更容易(虽然你也可以使用 class 属性和属性选择器，但使用它会更好另一个属性)

$(document).ready(function() {
  $("#test").on('load change', function() {
    $('#drinks .section-wrapper > section').hide().filter('[data-type="' + $(this).val() + '"]').show();
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drinks">
  <select id="test">
    <option value="Coffee">Coffee</option>
    <option value="Cold Drinks">Cold Drinks</option>
    <option value="Hot Drinks">Hot Drinks</option>
  </select>
  <div class="section-wrapper">
    <section data-type="Coffee">
      <h3>Coffee </h3>
      <h4>Coffee Flavor</h4>
    </section>
    <section data-type="Cold Drinks">
      <h3>Cold Drink</h3>
      <h4>Cold Drink</h4>
    </section>
    <section data-type="Hot Drinks">
      <h3>Hot Drink</h3>
      <h4>Hot Drink</h4>
    </section>
  </div>
</div>
</body>