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他の要素についても同じことを繰り返す必要があります。

さらにいくつかの変更を加えて更新します。

このコードにはいくつかの問題があり、将来的にフラストレーションを引き起こす可能性があります。私はそれを少し書き直すために自由を取りました。確かにまだ改善の余地はあるかもしれませんが、もっと扱いやすく理解しやすいものに一歩近づくことができると思います。

まず、複数の変数ではなく、単一のオブジェクト内にすべてのフィルター可能な基準を格納することから始めます。これにより、値をプッシュおよびプルするための1つの場所が提供されます。

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

次に、事前定義されたCSSセレクター内のキーワードを見つける小さな正規表現パターンを作成しています。関数、partsMapperは、正規表現が検出したキーワードをfType上記のオブジェクトの実際の値と交換する役割を果たします。

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

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

次に、すべてのselect要素を1つにグループ化し<div class='controller'>て、変更イベントをすべて1か所から簡単にキャプチャできるようにしました。

$(".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

于 2012-05-10T13:24:32.167 に答える