0

都市や州によって変化するページ用の JavaScript フィルターを作成するのに助けが必要です。州のオプションは単一の選択ドロップダウンとして提供され、都市はチェックボックスとして表示されます (つまり、複数の都市を選択できます)。すべての DIV (1 つの都市 DIV と 1 つの州 DIV を含む親 DIV) には、次のように、それぞれの DIV に都市と州の名前が含まれています。

<div class='row'>
  <div class='state'>Alabama</div>
  <div class='city'>Anniston</div>
</div>

これらは最初にページに読み込まれ、その後、初期フィルター (state='AL' city='all') に基づいて非表示になります。ユーザーが新しい州を選択するか、都市をチェック/チェック解除してフィルターを変更すると、どの DIV が非表示で、どの DIV が表示されているかを再評価する JavaScript 関数がトリガーされます。

状態フィルターは、次を使用してうまく機能します。

$(".parent").hide();
$(".state:contains('" + state + "')").parent().show();

関数に渡された状態に一致するすべての親 DIV を表示します。都市選択に問題があります。ユーザーが複数の都市を選択できるようにしたいので、都市の DIV が選択した都市のいずれかと一致し、さらに州と一致するすべての親 DIV を表示する方法が必要です。すべての DIV を非表示にしてから、一致する州を表示し、次に一致しない都市を非表示にしようとしています。何かのようなもの：

$(".parent").hide();
$(".state:contains('" + state + "')").parent().show();
$(".city:not(:contains('" + [city1 OR city2 OR city3 OR ...] + "'))").parent().hide();

明らかに [city1 OR city2 OR city3 OR ...] 部分は機能しません。このような複数の入力でこれを機能させる方法に関する提案はありますか?

ありがとう！

4

1 に答える 1

1

filter()mメソッドを使用

チェックボックスがどのように設定されているかわかりませんので、それらを疑似コーディングします

最初にすべての都市の配列を作成します。

var cities=$('.cityCheckBox:checked').map(function(){
  return this.value
}).get();

配列に含まれていないテキストに基づいて都市要素をフィルタリングするようになりました

$(".parent").show();
$('.city').filter(function(){
   var city=$.trim($(this).text());
   /* return only cities not in array*/
   return $.inArray( city,cities) == -1;
}).parent().hide();

これは、都市のみでフィルタリングしていることを前提としています。フィルターの場合、都市と州の両方で、フィルター関数でもう少し堅牢なテストが必要になるだけです。あなたが探しているものを100％明確にすることはできません

于 2013-10-31T03:08:58.120 に答える