应用于 <div> 的价格过滤器答案

【问题标题】：Price filter applied to <div>应用于 <div> 的价格过滤器
【发布时间】：2015-02-21 14:18:15
【问题描述】：

我的过滤器如下：设计：

<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>

滑块滑动但没有过滤。您能否告诉我如何添加动作以便滑动过滤器过滤某些东西感谢您的宝贵时间。

【问题讨论】：

你能创建jsfiddle吗？
jsfiddle.net/babarazvan/1as9vyyb
它是我的第一个 jsfiddle

标签： php jquery slide

【解决方案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();
        });

【讨论】：

【解决方案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 ));

    });

【讨论】：