jQuery価格フィルタ - フィルタオブジェクトからスライド値を設定

Question

jQueryスライドフィルタを使用して価格で製品をフィルタリングします。スクリプトのフィルタリングの値を設定しますが、データ属性を使用したページの最高/最低の数値に基づいて値を動的に設定する方がはるかに優れています。

これは可能でしょうか？

Filterオブジェクト：

<div class="priceinfo col5" data-price="100">100</div> 
<div class="priceinfo col5" data-price="1000">1000</div> 

スクリプト：

function showProducts(minPrice, maxPrice) { 
$("#products li").hide().filter(function() { 
    var price = parseInt($(this).data("price"), 10); 
    return price >= minPrice && price <= maxPrice; 
}).show(); 
} 

$(function() { 
var options = { 
    range: true, 
    min: 0, 
    max: 500, 
    values: [50, 300], 
    slide: function(event, ui) { 
     var min = ui.values[0], 
      max = ui.values[1]; 

     $("#amount").val("$" + min + " - $" + max); 
     showProducts(min, max); 
    } 
}, min, max; 

$("#slider-range").slider(options); 

min = $("#slider-range").slider("values", 0); 
max = $("#slider-range").slider("values", 1); 

$("#amount").val("$" + min + " - $" + max); 

showProducts(min, max); 
}); 

http://jsfiddle.net/5aPg7/

Answer 1

あなたはすべてのpriceの値を取得し、最大に

function showProducts(minPrice, maxPrice) { 
 
    $("#products li").hide().filter(function() { 
 
    var price = parseInt($(this).data("price"), 10); 
 
    return price >= minPrice && price <= maxPrice; 
 
    }).show(); 
 
} 
 

 
$(function() { 
 
    var prices = $('#products li').map(function() { 
 
    return $(this).data('price'); 
 
    }).get(); 
 
    var options = { 
 
     range: true, 
 
     min: Math.min.apply(Math, prices), 
 
     max: Math.max.apply(Math, prices), 
 
     values: [50, 300], 
 
     slide: function(event, ui) { 
 
     var min = ui.values[0], 
 
      max = ui.values[1]; 
 

 
     $("#amount").val("$" + min + " - $" + max); 
 
     showProducts(min, max); 
 
     } 
 
    }, 
 
    min, max; 
 

 
    $("#slider-range").slider(options); 
 

 
    min = $("#slider-range").slider("values", 0); 
 
    max = $("#slider-range").slider("values", 1); 
 

 
    $("#amount").val("$" + min + " - $" + max); 
 

 
    showProducts(min, max); 
 
});

.demo { 
 
    padding: 25px; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<div class="demo"> 
 

 
    <p> 
 
    <label for="amount">Price range:</label> 
 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
 
    </p> 
 

 
    <div id="slider-range"></div> 
 
    <ul id="products"> 
 
    <li data-price="10">product - £10</li> 
 
    <li data-price="50">product - £50</li> 
 
    <li data-price="100">product - £100</li> 
 
    <li data-price="150">product - £150</li> 
 
    <li data-price="200">product - £200</li> 
 
    </ul> 
 
</div>

のような&分を見つけることができます