jQuery價格滑塊過濾器

Question

我已經創建了我的jquery價格滑塊，但我不確定如何過濾我的結果，以便在滑動時只能看到範圍內具有該值的產品。

HTML：

<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> 
     <li> product - £10 </li> 
     <li> product - £50 </li> 
     <li> product - £100 </li> 
     <li> product - £150 </li> 
     <li> product - £200 </li> 
    </ul> 
</div>​ 

的JavaScript：

$(function() { 
    var options = 
     { 
      range: true, 
      min: 0, 
      max: 500, 
      values: [ 50, 300 ], 
      slide: function(event, ui) { 
       $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
      } 
     }; 

     $("#slider-range").slider(
      options 
     ); 
     $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
      " - $" + $("#slider-range").slider("values", 1)); 
    }); 

我的小提琴是http://jsfiddle.net/ktcle/uvJ8F/

Answer 1

我會做一些改動：

1. 給ÿ我們的產品列表中id屬性，並給每一個產品一個data-price屬性等於該項目的價格：

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

2. 當slide事件發生時添加的功能，將顯示或隱藏的那些產品：

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

3. 呼叫從slide事件處理函數：

   slide: function(event, ui) { 
       var min = ui.values[0], 
        max = ui.values[1]; 
   
       $("#amount").val("$" + min + " - $" + max); 
       showProducts(min, max); 
   } 
   

4. 另外調用該函數滑塊被初始化，以使正確的產品最初隱藏後右：

   var options = { 
       /* snip */ 
   }, 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); 
   

整個片段：

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/