jquery滑塊UL - 多個過濾器

Question

我嘗試創建基於jQuery滑塊的高級搜索引擎。

FIDDLE

$(document).ready(function() { 
    $("#slider_powcalk").slider({ 
     range:true, 
     min: 0, 
     max: 1000, 
     step: 5, 
     values: [100, 900], 
     slide: function(event, ui) { 
      for (var i = 0; i < ui.values.length; ++i) { 
       $("input.slider_powcalk_Value[data-index=" + i + "]").val(ui.values[i]); 
      } 
     } 
    }); 

    $("input.slider_powcalk_Value").change(function() { 
     var $this = $(this); 
     $("#slider_powcalk").slider("values", $this.data("index"), $this.val()); 
    }); 
}); 

我想運行一個頁面上的多個滑塊和每個寬度兩個值（輸入） 如何運行第二個滑塊來保持清醒的代碼（我不wnat複製所有的代碼和變化類只）

感謝您的幫助

Answer 1

請注意，您的例子重複的ID（必須是唯一的），但是不會導致與代碼的任何問題。

做你想做的，可以嘗試：

$(document).ready(function() { 
    $("#slider_powcalk, #slider_sso").each(function() { 
     var value = parseInt($(this).text(), 10); 
     $(this).empty().slider({ 
      range: true, 
      min: 0, 
      max: 1000, 
      step: 5, 
      values: [100, 900], 
      slide: function (event, ui) { 
       for (var i = 0; i < ui.values.length; ++i) { 
        $(this).parent().find("input[data-index=" + i + "]").val(ui.values[i]); 
       } 
      } 
     }); 
    }); 
    $("input.slider_powcalk_Value").change(function() { 
     var $this = $(this); 
     $("#slider_powcalk").slider("values", $this.data("index"), $this.val()); 
    }); 
}); 

jsFiddle example

我添加#slider_sso到您的滑塊實例得到$("#slider_powcalk, #slider_sso").slider({和幻燈片事件的值更新爲$(this).parent().find("input[data-index=" + i + "]")。