我的脚本可以工作，但目前它使用按钮输入，我想将其更改为选择框输入，但我似乎根本无法让代码工作，请帮助
<!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>
谢谢
最佳答案
这个问题有很多需要改进的地方，但这应该会给你立竿见影的结果:
$('#fuel select').on("change", function() {
fuel = (this.value ? '.' : '') + this.value;
selectModels();
});
您需要对其他 select 重复相同的操作元素也是如此。
更新并进行一些更改:
此代码存在几个问题，可能会在将来给您带来一些挫败感。我冒昧地重写了一下。当然，可能仍然有一些改进的空间，但我认为这会让你更接近更容易处理和理解的东西。
我首先将所有可过滤条件存储在单个对象中，而不是多个变量中。这为我们提供了一个推拉值(value)的地方。
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方法。
});
关于jquery - 将按钮更改为选择框代码更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10534819/