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标签。同样适用于其他下拉列表。我究竟做错了什么？这是我小提琴的链接。

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

Answer 1

您需要进行一些标记更改才能轻松完成。

与在value中使用option一样来存储选项的值，同样在该部分中使用属性来存储该类型。如果您在选项中使用value，则可以通过阅读select的值轻松获取当前值。如果您在section中使用了类，则[space]被视为课程中的分隔符，因此Cold Drinks将表示2个类Cold和Drinks，因此它将使用属性选择器很容易（尽管你也可以使用class属性和属性选择器，但最好使用另一个属性）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试以下代码

HTML

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

和javascript代码

$(document).ready(function() {
    $("#test").change(function(){
        $("section").hide();
        $("section" + "." + $('option:selected', this).attr('data-tab')).show();
    })
 });

根据下拉列表中选择的项目隐藏所有元素

2 个答案: