更改按钮以更改选择框代码 [英] Change button to selectbox code change
问题描述
我有我的脚本，但是当前它使用按钮输入，我想将其更改为选择框输入，但是我似乎无法使代码完全起作用，请帮忙
i have my script working but currently it used a button input, i want to change it to a select box input, but i cant seem the get the code to work at all, please help
<!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>
谢谢
推荐答案
这个问题有很多地方需要改进，但这应该会立即为您带来结果:
There's a lot in this question that needs to be improved upon, but this should give you immediate results:
$('#fuel select').on("change", function() {
fuel = (this.value ? '.' : '') + this.value;
selectModels();
});
您还需要对其他select元素重复相同的操作.
You would need to repeat the same for the other select elements as well.
更新后还有一些更改:
此代码存在多个问题，将来可能会给您带来一些挫败感.我冒昧地重新写了一下.当然，仍有改进的空间，但是我认为这将使您更容易处理和理解.
There are several issues with this code which could cause you some frustration in the future. I took the liberty to re-write it a bit. Granted there may still be some room for improvement, but I think it will get you a step closer to something more easily handled and understood.
我首先将所有可过滤的标准存储在单个对象中，而不是几个变量中.这为我们提供了一个推和拉值的地方.
I start by storing all of the filterable criteria inside a single object, rather than several variables. This gives us one place to push and pull values.
var fType = { 'fuel' : 'all', 'drive' : 'all', 'type' : 'all' };
接下来，我将创建一个小的正则表达式模式，该模式将在预定义的CSS选择器中找到关键字.函数partsMapper将负责将正则表达式发现的关键字与上面的fType对象的实际值交换出来.
Next I'm creating a small regular expression pattern that will find keywords within a predefined CSS selector. The function, partsMapper, will be responsible for swapping out the keywords that the regex discovers with the actual values from the fType object above.
var partsRegex = /([a-z]+)/g;
function partsMapper ( s, p ) {
return fType[p];
}
接下来，我将所有select元素归为一个<div class='controller'>，以便我们可以更轻松地从一个地方捕获它们的更改事件.
Next, I've grouped all of your select elements into a single <div class='controller'> so that we can more easily capture their change events all from one place.
$(".controller").on("change", "select", function(){
当select的change事件触发时，从.controller内部开始，我们首先更新fType对象中该change事件的值.因此，如果更改了#fuel，我们将把fType[fuel]更新为新值.
When the change event of a select fires, from within .controller, we're start by updating the value for that change event in our fType object. So if #fuel was changed, we'll be updating fType[fuel] to the new value.
// Set new value
fType[ this.id ] = this.value;
随着fType对象的更新，我们可以更新项目列表.我们首先隐藏所有列表项(是的，我也在这里进行了重组).接下来，我们仅选择与.fuel.drive.type选择器匹配的列表项，在其中找到每个关键字，并用我们的正则表达式/函数组合替换为fType对象中的当前值.
With our fType object freshly updated, we can update our list of items. We start by hiding all of the list items (yeah, I restructured here as well). Next we select only the list items that match a .fuel.drive.type selector, where each of those keywords is found and replaced by our regular expression/function combo with the present value in the fType object.
因此，如果fType.fuel是"petrol"，则我们的选择器将以.petrol开头.默认情况下，所有条件都设置为"all"，因此一旦将#fuel更改为petrol，我们的选择器将立即变为.petrol.all.all，其中显示了所有.petrol项.
So if fType.fuel is "petrol", then our selector will begin with .petrol. All of the criteria were set to "all" by default, so once you change #fuel to petrol, our selector will immediately become .petrol.all.all, which shows all .petrol items.
// Update filtered items
$(".modelList li")
.hide()
.filter('.fuel.drive.type'.replace( partsRegex, partsMapper ))
.show();
最后，我们关闭了$.on方法.
Lastly we close up our $.on method.
});
演示: http://jsbin.com/imezez/edit#javascript,html
这篇关于更改按钮以更改选择框代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
