2

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

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

谢谢

4

1 回答 1

2

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

$('#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(){

当 a 的 change 事件select从 inside 触发时.controller，我们首先更新fType对象中该 change 事件的值。因此，如果#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

于 2012-05-10T13:24:32.167 回答