0

首先，这是我第一次使用 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>
4

2 回答 2

0

基本上在您想要展示汽车的时候，您想要检查所有 3 个选择框的值，以便您知道要展示哪些汽车

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

编辑：

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

对于最后一个，您只需检查前面的两个框和这个框并输出正确的汽车

于 2012-05-09T18:08:27.347 回答
0

尝试执行以下操作：

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

希望回答对你有所帮助。此致！

于 2012-05-09T18:17:06.310 回答