2

私はこのjsfiddle http://jsfiddle.net/danieltulp/gz5gN/を持っています

私がやりたいのは、約6つのスライダーを持つデータプロパティの順序付けられていないリストを調整することです。しかし、私の開発では、2つだけを使用しています

最初の質問: 品質スライダーは正常に機能しますが、価格スライダーをスライドすると、minP 変数と maxP 変数がオブジェクトとして表示されます。なぜですか? どうすればそれを修正できますか?

2 番目の質問: 私のコードはかなり厄介です。各フィルター (つまり、価格、品質など) に固有のコードを書かなければなりません。どうすればコードを簡素化/短縮できますか?

フィドルからのコード:

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
<div class="demo">
    price<br />
    <div id="price"></div>
    quality<br />
    <div id="quality"></div>
    <ul id="products">
        <li data-price="10" data-quality="20"> product - £10 q20</li>
        <li data-price="50" data-quality="40"> product - £50 q40</li>
        <li data-price="100" data-quality="80"> product - £100 q80</li>
        <li data-price="150" data-quality="30"> product - £150 q30</li>
        <li data-price="200" data-quality="40"> product - £200 q40</li>
    </ul>
</div>

Javascript

function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 250,
        values: [0, 250],
        slide: function(event, ui) {
            if(event.target.id = "price"){
                var minP = ui.values[0],
                      maxP = ui.values[1],
                      minQ = $("#quality").slider("values", 0),
                      maxQ = $("#quality").slider("values", 1);
             }
            if(event.target.id = "quality"){
                var minP = $("#price").slider("values", 0),
                      maxP = $("#price").slider("values", 1),
                       minQ = ui.values[0],
                       maxQ = ui.values[1];
              }
              alert(minP +", "+ maxP +", "+ minQ +", "+ maxQ);
              showProducts(minP, maxP, minQ, maxQ);
          }
      };

     $("#price").slider(options);
     $("#quality").slider(options);
  });

編集:最小最大変数がオブジェクトであるという最初の問題は、品質の if ステートメントを価格のステートメントの上に移動すると、品質スライダーにも発生します。価格の値は正しいです。そのため、slide 関数の if ステートメントに問題があるようです。

4

2 に答える 2

2

filter.js という非常に便利な jquery プラグインがあるようです

デモ: http://jiren.github.com/filter.js/filterjs.html

github: https://github.com/jiren/filter.js

チュートリアル: http://blog.joshsoftware.com/2011/09/28/filter-js-client-side-search-filtering-using-json-and-jquery/

于 2012-07-30T08:55:30.763 に答える
0

スライドイベントを変更すると、使用できるようになります

change: function(event, ui) {
        var minP = $("#price").slider("values", 0);
        var maxP = $("#price").slider("values", 1);
        var minQ = $("#quality").slider("values", 0);
        var maxQ = $("#quality").slider("values", 1);
        showProducts(minP, maxP, minQ, maxQ);
    }

これらのステートメントは、スライド中にスライド イベントがトリガーされたときに古い値を取得したため、これはスライド イベントでは不可能でした (iPad でテストしましたが、実際のマウスでこれがどのように機能するかはわかりません) http://jqueryui.com/demos/を参照してください。詳細については、slider/#event-slide

ワーキングjsfiddle http://jsfiddle.net/danieltulp/gz5gN/42/

今でもコードを簡素化/短縮する必要があります

編集：

少なくともより明確なコードを作成するためのアイデアがあります

最初に、slidervalue が増加したか減少したかを判断する必要があります。次に、表示または非表示のリスト項目のみをフィルタリングして、非表示または表示することができます

これにより、既にフィルター処理されたリスト項目のみに影響を与えることができるため、以前のコードで行っていたようにそれらを再度非表示にする必要はありません

しかし、コード内の何かでjsfiddleが壊れますが、それを絞り込むことはできません。アイデアはありますか? http://jsfiddle.net/danieltulp/4uF3e/4/

于 2012-07-27T12:40:00.023 に答える