0

（注：少なくとも私の頭の中では、質問が何らかの形で相関していることに気付いたので編集しました！）

結果がアニメーション化されるマルチフィルターページを作成したい... 2 つの異なるプラグイン (quicksand と Isotope) を試していますが、両方のソリューションで問題が発生しています...

---ISOTOPE--- (オリジナル)

Isotope では、アクティブなクラスに基づいて、または既に JS に保存したフィルターの ID に基づいてデータをフィルター処理する必要があります。

「色」(赤、青、オレンジ...) と「タイプ」(正方形、円形...) のような 2 つの異なるフィルターを使用してページを設定しました選択時に、すべての色が選択されている場合は、「アクティブ」クラスを「すべて」にシフトし、複数のサブフィルターをアクティブにすることができます。また、これにより、アクティブなliアイテムのIDのリストが、カラーフィルター用の文字列と形状フィルター用の別の文字列に保存されます

また、このリンクでコンビネーション フィルター Isotope デモのようなページを既にセットアップしています: http://isotope.metafizzy.co/demos/combination-filters.htmlで、正常に動作していますが、複数のサブを選択することはできません。 -同時にフィルタリングします。

このリンクhttp://fiddle.jshell.net/desandro/JB45z/でフィルタリングの組み合わせでデモを見ましたが、避けたいラジオボタンに基づいています。

私がやろうとしていることが簡単かどうかはわかりません... isotopeに、アクティブなクラスを持つサブフィルターに基づいて、またはliの合計に基づいてフィルタリングするように指示する方法ですID は私の 2 つの文字列に保存されますか?

簡単に理解できるように、助けてくれてありがとう、私はjsにまったく熟練しておらず、英語は私の母国語ではありません!

--- QUICKSAND --- (編集済み)

選択したアイテムの ID を js 文字列に保存した理由を説明していないことに気付きました。そして、これは別のjsの質問についてでもあります。

Isotope の代わりに Quicksand を使って同じシステムをセットアップしようとしていました。

しかし、流砂はアニメーションを表示するために開始liと宛先liが必要なので、配列を使用して宛先liを表示する別の一時phpページに配列を渡すようにjsを設定しました。

ここまではすべて正常に動作していますが、Quicksand にアニメーションを実行させるために元のページの li データを取り戻すことができません。私のjsの最後の部分には、修正できない問題があるようです（何日も試行しても成功しません）。jsの最後の部分は次のとおりです。

$.post( 'destination_li_filtered.php', { 
 colorString, 
 shapeString, 
 $('#ids').attr('val') 
}, 
function(data) { // should contains the resulting data from the request (?)
 $('.list').quicksand( $(data).find('li'), 
 { adjustHeight: 'auto' }, 
 function() { 
 callbackCode(); 
} 
);
e.preventDefault(); 
});

外部ページの destination-li-filtered は結果を表示していますが、元のページはデータを取り戻すことができません...

明らかに、両方ではなく、アイソトープまたは流砂でページを設定する必要があります。

しかし、魔女が約20個のフィルターで数百の結果を表示するのに最適なプラグインであることも疑問に思っています（組み合わせを考慮せずに）。そしてもちろん、これが一番使いやすいです！

4

1 に答える 1

0

ラジオボタンとビューの変更が別々のものとして表示されるはずです。

すべての状態をDOMに保存する必要があるというのはよくある誤解です（つまり、どのチェックボックスがオンになっているのか）。DOMはビューであり、ビュー内の状態を保持しません。

JavaScriptに存在する状態が必要です。

好き：

var state = "all_selected"; // green, red, blue

次に、ラジオボタンをオンにすると、適切な状態が設定され、リストが更新されます（状態に基づいて要素を表示/非表示にします）。

これにより、ラジオボタン、チェックボックス、または完全にカスタムなものなど、必要なコントロールを作成できます。

于 2013-02-01T16:21:59.640 に答える