Jquery 3一起选择更改时的复选框_Jquery

Jquery 3一起选择更改时的复选框

jquery

Jquery 3一起选择更改时的复选框,jquery,Jquery,在我的网站上，我添加了一个3过滤器，燃油类型，驾驶类型和车辆类型，我的代码半工作，它根据选择框显示车辆，但有一个问题，我希望它不显示其他选择。例如，当你选择汽油汽车时，它会显示一些不是手动的汽车，但是是汽油汽车，我只想让它显示精确的匹配，所以如果你选择汽油手动汽车，它只会显示汽油汽车、手动汽车和汽车 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

在我的网站上，我添加了一个3过滤器，燃油类型，驾驶类型和车辆类型，我的代码半工作，它根据选择框显示车辆，但有一个问题，我希望它不显示其他选择。例如，当你选择汽油汽车时，它会显示一些不是手动的汽车，但是是汽油汽车，我只想让它显示精确的匹配，所以如果你选择汽油手动汽车，它只会显示汽油汽车、手动汽车和汽车

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


 <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">
$(function() {
    var fuel = ''; // Keep track of selections
    var drive = '';
    var type = '';
    $('#fuel select').on("change", function() {
    fuel = (this.value ? '.' : '') + this.value;
    selectModels();
});
        $('#drive select').on("change", function() {
    fuel = (this.value ? '.' : '') + this.value;
    selectModels();
});
    $('#type select').on("change", function() {
    fuel = (this.value ? '.' : '') + this.value;
    selectModels();
});
    function selectModels() { // Select matching models
        $('div.modelContainer').hide(). // Hide all
            filter(fuel + drive + type).show(); // Show matches
    }
});
</script>
</head>
<body>
<div id="fuel" class="controller">
<span class="controllerLabel">fuel:</span>
<select>
  <option value="all">all</option>
  <option value="petrol">petrol</option>
  <option value="diesel">diesel</option>
</select>
</div>



<div id="drive" class="controller">
<span class="controllerLabel">drive:</span>
<select>
  <option value="all">all</option>
  <option value="auto">auto</option>
  <option value="manual">manual</option>
</select>
</div>
<div id="type" class="controller">
<span class="controllerLabel">type:</span>
<select>
  <option value="all">all</option>
  <option value="car">car</option>
  <option value="4">4x4</option>
  <option value="7">peoeple</option>
  <option value="vanl">van</option>
</select>
</div>



<div class="modelContainer  petrolmanualcar">

<!-- <a id="" href="panda.html" title="Panda 1.2" accesskey="1"></a> -->
<p><img align="right" alt="Panda 1.2" id="image47" title="Clio 1.2" src="images/panda.jpg" width="150" height="115"></img></p>
<div class="c2"><big><a href="Panda.html"><strong>Fiat Panda 1.2 5Dr:</strong></a></big><br></br>
&pound;25.00 per Day<p>
&pound;130.00 per week</p>
</div>

</div>





<div class="modelContainer  petrol auto car">

<!-- <a id="" href="focus.html" title="Auto. Focus 1.6" accesskey="1"></a>-->
<p><img align="right" alt="Automatic 1.6" id="image4foc" title="Automatic or Manual Focus 1.6" src="images/Focus.jpg" width="200" height="130"></img></p>
<div class="c2"><big><a href="focus.html"><strong>Auto. Ford Focus 1.6:</strong></a></big><br></br>
&pound;32.00 per day<p>
&pound;175.00 per week</p>
</div>

</div>


<div class="modelContainer diesel manual car">

<!-- <a id="" href="rio.html" title="Kia Rio 1.5 Crdi" accesskey="1"></a> -->
<p><img align="right" alt="rio" id="imagerio" title="rio" src="images/rio.jpg" width="180" height="105"></img></p>
<div class="c2"><big><a href="rio.html"><strong>Kia Rio 1.5 CRDi:</strong></a></big><br></br>
&pound;28.00 per day<p>
&pound;155.00 week</p>
</div>

</div>

<div class="modelContainer  diesel manual 4">
<!-- <a id="" href="sportage.html" title="Kia Sportage 2 1.7 Manual CRDi" accesskey="1"></a>-->
<p><img align="right" alt="Kia Sportage" id="imagesport" title="Kia Sportage 1.7 CRDi" src="images/sportage.jpg" width="210" height="130"></img></p>
<div class="c2"><big><a href="sportage.html"><strong>Kia Sportage 2 1.7 CRDi:</strong></a></big><br></br>
<p>£45.00 per day<br />
&pound;120.00 per 3 days<br />
£250.00 per week</p>
</div>

</div>

<div class="modelContainer diesel manual van">

<!-- <a id="" href="kangoo.html" title="Renault Kangoo Van SL17 Dci70+" accesskey="1"></a>-->
<p><img align="right" alt="Renault Kangoo Van SL17 Dci70+" id="imagekang" title="Renault Kangoo Van" src="images/kangoo.jpg" width="190" height="100"></img></p>
<div class="c2"><big><a href="kangoo.html"><strong>Renault Kangoo Van SL17 Dci70+:</strong></a></big><br></br>
&pound;26.50 per day<p>
&pound;150.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto car">

<!-- <a id="" href="ceed.html" title="Kia Ceed sports tourer CRDi" accesskey="1"></a>-->
<p><img align="right" alt="Kia Ceed Sports Tourer" id="imageceedst" title="Kia Ceed sports tourer" src="images/ceed.jpg" width="210" height="90"></img></p>
<div class="c2"><big><a href="ceed.html"><strong>Auto. Kia Ceed Sports Tourer CRDi :</strong></a></big><br></br>
&pound;35.00 per day<p>
&pound;200.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto 4">

<!-- <a id="" href="sportageauto.html" title="Kia Sportage KX2 2.0 Auto 4X4" accesskey="1"></a>-->
<p><img align="right" alt="Kia Sportage" id="imageautosport" title="Kia Sportage 1.7 CRDi" src="images/sportage.jpg" width="210" height="130"></img></p>
<div class="c2"><big><a href="sportageauto.html"><strong>Auto. Kia Sportage KX2 2.0 4X4:</strong></a></big><br></br>
<p>&pound;50.00 per day<br />
&pound;125 per 3 days<br />
&pound;270.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto 7">

<!-- <a id="" href="newgalaxy.html" title="New Automatic Galaxy 2.0 TDi" accesskey="1"></a>-->
<p><img align="right" alt="New Auto Galaxy" id="imagegal" title="New Automatic Galaxy 2.0 TDi" src="images/newgalaxy.jpg" width="240" height="150"></img></p>
<div class="c2"><big><a href="newgalaxy.html"><strong>Auto. Ford Galaxy 2.0 TDI 7 Seater:</strong></a></big><br></br>
<p>&pound;65.00 per day<br />
&pound;165 per 3 days<br />
&pound;310.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto 7 4">

<!-- <a id="" href="sorento.html" title=
Kia Sorento 4X4 Automatic" accesskey="1"></a>-->
<p><img align="right" alt="sorento" id="imagesor" title="Kia Sorento 4X4" src="images/sorento.jpg" width="300" height="200"></img></p>
<div class="c2"><big><a href="sorento.html"><strong>Auto. Kia Sorento KX3 CRDi 4X4 7 Seater:</strong></a></big><br></br>
<p>&pound;70 per day<br />
&pound;180 per 3 days<br />
&pound;360 per week</p>
</div>

</div>
</body>
</html>


$（函数（）{
var fuel=''；//跟踪选择
var驱动器=“”；
变量类型=“”；
$（“#燃油选择”）。打开（“更改”，函数（）{
燃料=（this.value？）：“”）+this.value；
选择模型（）；
});
$（“#驱动器选择”）。打开（“更改”，函数（）{
燃料=（this.value？）：“”）+this.value；
选择模型（）；
});
$（'#键入select'）。在（“更改”，函数（）上）{
燃料=（this.value？）：“”）+this.value；
选择模型（）；
});
函数selectModels（）{//选择匹配的模型
$（'div.modelContainer'）.hide（）。//全部隐藏
过滤器（燃油+驱动+类型）.show（）；//显示匹配项
}
});
燃料：
全部的
汽油
柴油机
驱动器：
全部的
汽车
手册
类型：
全部的
汽车
4x4
人
厢式货车




&磅；每天25.00英镑
&磅；每周130.00




&磅；每天32.00英镑
&磅；每周175.00




&磅；每天28.00英镑
&磅；每周155.00




每天45英镑

&磅；每3天120.00次

每周250.00英镑




&磅；每天26.50英镑
&磅；每周150.00




&磅；每天35.00英镑
&磅；每周200.00




&磅；每天50.00英镑

&磅；每3天125次

&磅；每周270.00




&磅；每天65.00英镑

&磅；每3天165次

&磅；每周310.00




&磅；每天70英镑

&磅；每3天180次

&磅；每周360

谢谢

这是您应该如何编写脚本的，我在JSFIDLE上检查了它，它运行正常。 JSFIDLE示例可在此处找到：

这不是我刚才回答的问题吗？

$('#fuel select').on("change", function() {
    selectModels();
});
$('#drive select').on("change", function() {
    selectModels();
});
$('#type select').on("change", function() {
    selectModels();
});

function selectModels() { // Select matching models
    var fuel = $("#fuel select :selected").val();
    var drive = $("#drive select :selected").val();
    var type = $("#type select :selected").val();
    //alert("[" + fuel + "/" + drive + "/" + type + "]");

    var extraClasses = '';    
    if(fuel && fuel != "all") {
        extraClasses += "." + fuel;
    }
    if(drive && drive != "all") {
        extraClasses += "." + drive;
    }
    if(type && type != "all") {
        extraClasses += "." + type;
    }
    //alert(extraClasses);

    $('div.modelContainer').hide(); // Hide all
    $('div.modelContainer' + extraClasses).show(); // Show matches
}

 $(function () {
            var fuel = ''; // Keep track of selections
            var drive = '';
            var type = '';
            $('#fuel select').on("change", function () {
                fuel = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            $('#drive select').on("change", function () {
                drive = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            $('#type select').on("change", function () {
                type = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            function selectModels() { // Select matching models
                $('div.modelContainer').hide(); // Hide all
                $('div.modelContainer' + fuel + drive + type).show();
            }
        });