Question

我有我的脚本工作，但目前它使用了一个按钮输入，我想将其更改为选择框输入，但我似乎无法让代码工作，请帮助

<!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 button').click(function() { // Choose a fuel
    fuel = (this.id ? '.' : '') + this.id;
    selectModels();
});
$('#drive button').click(function() { // Choose a drive
    drive = (this.id ? '.' : '') + this.id;
    selectModels();
});
$('#type button').click(function() { // Choose a colour
    type = (this.id ? '.' : '') + this.id;
    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>
<button>All</button>
<button id="petrol">petrol</button>
<button id="diesel">diesel</button>
</div>
<div id="drive" class="controller">
<span class="controllerLabel">drive:</span>
<button>All</button>
<button id="man">manual</button>
<button id="auto">auto</button>

</div>
<div id="type" class="controller">
<span class="controllerLabel">type:</span>
<button>All</button>
<button id="car">car</button>
<button id="4">4x4</button>
<button id="7">people</button>
<button id="van">van</button>

</div>



<div class="modelContainer petrol manual car">

pmc

</div>

<div class="modelContainer petrol manual 4">

pm4

</div>



<div class="modelContainer petrol auto car">

pac

</div>


<div class="modelContainer diesel manual car">

dmc

</div>



<div class="modelContainer diesel manual van">

dmv

</div>

<div class="modelContainer diesel auto car">

dac

</div>

<div class="modelContainer diesel auto 4">

da4

</div>

<div class="modelContainer diesel auto 7">

da7

</div>

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

sor

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

将“燃料”按钮更改为

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

由于

Answer 1

这个问题有很多需要改进的地方，但这应该会立即给你带来结果：

$('#fuel select').on("change", function() {
    fuel = (this.value ? '.' : '') + this.value;
    selectModels();
});

您还需要为其他select元素重复相同的操作。

更新了一些更改：

此代码存在一些问题，可能会让您在将来感到沮丧。我冒昧地重新写了一下。虽然可能仍有一些改进空间，但我认为它会让你更接近一些更容易处理和理解的东西。

我首先将所有可过滤标准存储在单个对象中，而不是几个变量中。这为我们提供了一个推动和拉动价值的地方。

var fType = { 'fuel' : 'all', 'drive' : 'all', 'type' : 'all' };

接下来我正在创建一个小的正则表达式模式，它将在预定义的CSS选择器中找到关键字。函数partsMapper将负责将正则表达式发现的关键字与上面fType对象的实际值进行交换。

var partsRegex = /([a-z]+)/g;

function partsMapper ( s, p ) {
  return fType[p];
}

接下来，我将您的所有select元素归为一个<div class='controller'>，以便我们可以更轻松地从一个地方捕获他们的更改事件。

$(".controller").on("change", "select", function(){

当select的更改事件从.controller内触发时，我们首先更新fType对象中该更改事件的值。因此，如果更改#fuel，我们会将fType[fuel]更新为新值。

  // Set new value
  fType[ this.id ] = this.value;

我们的fType对象新近更新，我们可以更新我们的项目列表。我们首先隐藏所有列表项（是的，我也在这里重组）。接下来，我们只选择与.fuel.drive.type选择器匹配的列表项，其中每个关键字都被找到并被我们的正则表达式/函数组合替换为fType对象中的当前值。

因此，如果fType.fuel为"petrol"，那么我们的选择器将以.petrol开头。默认情况下，所有条件都设置为"all"，因此，当您将#fuel更改为petrol后，我们的选择器将立即变为.petrol.all.all，其中显示所有.petrol项目

  // Update filtered items
  $(".modelList li")
    .hide()
  .filter('.fuel.drive.type'.replace( partsRegex, partsMapper ))
    .show();

最后，我们关闭了$.on方法。

});

演示：http://jsbin.com/imezez/edit#javascript,html

更改按钮以选择框代码更改

1 个答案: