Question

我的过滤器如下：设计：

<div id="price-filter" class="panel-collapse collapse in" style="height: auto;">
<div id="price-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 10%; width: 70%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 10%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 80%;"></a></div>
<br>
<span class="min-price-label pull-left">$100</span>
<span class="max-price-label pull-right">$800</span>
<div class="clearer"></div>
</div>
</div>

过滤Js代码：

tjq(document).ready(function() {
    tjq("#price-range").slider({
        range: true,
        min: 0,
        max: 1000,
        values: [ 100, 800 ],
        slide: function( event, ui ) {
            tjq(".min-price-label").html( "$" + ui.values[ 0 ]);
            tjq(".max-price-label").html( "$" + ui.values[ 1 ]);
        }
    });
    tjq(".min-price-label").html( "$" + tjq("#price-range").slider( "values", 0 ));
    tjq(".max-price-label").html( "$" + tjq("#price-range").slider( "values", 1 ));

    tjq("#rating").slider({
        range: "min",
        value: 40,
        min: 0,
        max: 50,
        slide: function( event, ui ) {

        }
    });
});

我需要过滤的div是：

<div id="hotel-list">
  <article data-price="10">Article with price 10 </article>
  <article data-price="20">Article with price 20 </article>
  <article data-price="30">Article with price 30 </article>
  <article data-price="40">Article with price 40 </article>
</div>

滑块滑动但没有过滤。你能告诉我如何添加动作，以便滑动过滤器来过滤一些东西谢谢你的时间。

Answer 1

http://jsfiddle.net/1as9vyyb/1/

        $('article[data-price]').each(function() {
            var dPrice = $(this).attr('data-price');
            if ( dPrice < ui.values[ 0 ] || dPrice > ui.values[ 1 ] ) 
                $(this).hide();
            else
                $(this).show();
        });

Answer 2

tjq(document).ready(function() {
        var mi=$("#txtmin").val();
        var ma = $("#txtmax").val();

        tjq("#price-range").slider({

            range: true,
            min: mi,
            max: ma,
            values: [ mi, ma ],
            slide: function( event, ui ) { 

                tjq(".min-price-label").html( "$" + ui.values[ 0 ]);
                tjq(".max-price-label").html( "$" + ui.values[ 1 ]);
            }
        });
        tjq(".min-price-label").html( "$" + tjq("#price-range").slider( "values", 0 ));
        tjq(".max-price-label").html( "$" + tjq("#price-range").slider( "values", 1 ));

    });

价格过滤器应用于<div> </div>

2 个答案: