div 隐藏/显示 if 语句多个投递框

Question

首先，这是我第一次使用jQuery，所以我的代码不会是最好的。我正在根据 3 个投递箱向我的作品网站添加一个过滤器：燃料类型、驱动类型和车辆类型。我希望当有人选择汽油时，它会显示所有的汽油车，我已经设法实现了，但现在我有点卡住了。我现在希望它基于所有 3 个框显示，所以如果有人选择汽油，然后选择汽车，然后选择汽车，它将只显示汽油自动汽车。我似乎无法使 3 个盒子一起工作。所以请帮忙。

<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript">                                         
$(document).ready(function() {
    // fuels
    $("#fuel").change(function() {
      if ($("#fuel option[value='petrol']").attr('selected')) {
        $('div[class*=petrol]').css('display','block');

      }
          if ($("#fuel option[value='diesel']").attr('selected')) {
        $('div[class*=diesel]').css('display','block'); 

      }
      // end
     //drivetype
    }); 
        $("#drive").change(function() {
      if ($("#drive option[value='man']").attr('selected')) {
        $('div[class*=manual]').css('display','block');

      }
          if ($("#drive option[value='auto']").attr('selected')) {
        $('div[class*=auto]').css('display','block');

      }
      //end

    }); 
    // vech type
    $("#type").change(function() {
      if ($("#type option[value='car']").attr('selected')) {
        $('div[class*=car]').css('display','block');

      }
          if ($("#type option[value='4']").attr('selected')) {
        $('div[class*=4]').css('display','block');

     }
      if ($("#type option[value='7']").attr('selected')) {
        $('div[class*=7]').css('display','block');

     }
     if ($("#type option[value='van']").attr('selected')) {
        $('div[class*=van]').css('display','block');

     }
    // end

    });
  });

<select id="fuel">
<option value="none">fuel</option>
<option value="petrol">petrol</option>
<option value="diesel">diesel</option>
</select>
<select id="drive">
<option value="none">drive</option>
<option value="man">manual</option>
<option value="auto">auto</option>
</select>
<select id="type">
<option value="none">type</option>
<option value="car">car</option>
<option value="4">4x4</option>
<option value="7">people carrier</option>
<option value="van">van</option>
</select>    

Answer 1

基本上，当您要显示汽车时，您希望选中所有 3 个选择框以获取其值，以便您知道要显示哪些汽车

在这种情况下，当显示"汽车"的汽车时，您需要检查汽油和汽车。 当显示"汽车"的汽车时，您需要检查所有 3 个。

编辑：

$("#type").change(function() {
    // check previous select box value, check this box value
    // output the correct cars
});

对于最后一个，您只需选中前面的框和此框并输出正确的汽车

Answer 2

尝试执行以下操作：

 $("#fuel").change(function() {
   var value = $(this).val();
   $(".elements_to_hide").hide(); //check if needed
   $("." + value).show();
});

请不要t take it personally, but I给你的代码一些建议：

1. 尽量避免这种复杂的构造，例如： $（'div[class*=diesel]'）。它会影响性能。
2. JQuery 包含用于显示/隐藏 DOM 元素的内置函数 — .show（）， .hide（）
3. 要获得"选择"选项，请使用 .val（）;

希望答案对您有所帮助。此致敬意！