UIslider按钮不适用于复选框filter

我试图弄清楚如何强制滑块的按钮移动它而不是正常滑动，但保持复选框filter仍然正常工作。

当我设置按钮移动滑块时，filter不会按照应有的方式工作。 当我将滑块代码从：values：[10000]更改为：value：10000时，问题就出现了。

这是我的代码和jsfiddle示例，正确工作的filter而不是工作按钮（在该示例中仅有滑块+复选框过滤，以显示我需要如何过滤产品）。 https://jsfiddle.net/7er9sxzq/

我正在寻找任何帮助以使其有效。

CSS： 

body { font-family:'Arial'; color:#646464; } .continents-wrap { float:left; width:20%; margin:0 5% 0 0; padding:0; } .tabela-wrap { float:left; width:50%; margin:0 5% 0 0; padding:0; position:relative; } .tabela { float:left; width:50%; } .tabela div { float:left; width:90%; height:68px; line-height:68px; padding:0 5%; background:#eee; margin:0 0 1px; position:relative; } .number {font-size:12px;} .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -0.5em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-widget-content { border: 1px solid #aaaaaa; background: white 50% 50% repeat-x; color: #222222; } .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { width: 30px; height: 30px; border: 3px solid #2F3D44; border-radius: 20px; background: white 50% 50% repeat-x; font-weight: normal; color: #555555; } .slider1Hide { display: none; } .sliderButtons { width: 200px; height: 30px; border: 1px solid #ccc; }

HTML： 

    

 
+ Increase
 
- Decrease
 

 
         
 

 
     
  • 10 000 USD contains 1 2 3 4
    •  
  • 12 000 USD contains 2 3
    •  
  • 13 000 USD contains 4 5
    •  
  • 14 000 USD contains 5 6
    •  
  • 12 000 USD contains 5
    •  
  • 14 000 USD contains 1 2
    •  
  • 16 000 USD contains 1 2 3
    •  
  • 20 000 USD contains 7 8
    •

JS： 

 var mySlider; function filterPrice(products) { let minP = $("#price").slider("values", 0); let maxP = $("#price").slider("values", 1); return products.filter(function() { let value = parseInt($(this).data("price"), 10); return !(value > maxP || value  0) { label = "We found " + numItems + " offers."; } else { label = "No results"; } $("#found").text(label); } $(function() { let options = { min: 500, max: 100000, step: 500, values: [10000], // If changed to value: 10000, other filters does not work slide: function(event, ui) { $("#amount").val(ui.value + " USD"); }, change: function(event, ui) { filterProducts(); } }; $("input").filter(function() { return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1; }).change(filterProducts); mySlider = $("#price").slider(options); $("#amount").val(mySlider.slider("value") + " USD"); }); $('.sliderButtons').click(function() { var step = +$(this).attr("step"); mySlider.slider("option", "value", mySlider.slider("value") + step); $("#amount").val(mySlider.slider("value") + " USD"); });

这是预期的function吗？ 

 $(document).ready(function(){ // cache ref to all checkbox elements var checkboxes = $('input:checkbox'), // cache ref to results results = $('#results'), // cache ref to our list listItems = $('.tabela > li'), // cache amount ref amount = $('#amount'), // collection of selected checkbox elements selectedItems = [], // slider config slideOptions = { min: 500, max: 100000, step: 500, values: [10000], slide: function(event, ui) { amount.val(ui.values[0] + " USD"); }, change: function(event, ui) { updateList(); } }; // render our slider var slider = $("#price").slider(slideOptions); amount.val($("#price").slider("values", 0) + " USD"); checkboxes.on('change', function(){ var id = this.id; if(this.checked){ // push the element vs the value selectedItems.push(this.value); }else{ // remove items on uncheck selectedItems.splice(selectedItems.indexOf(this.value), 1); } updateList(); }); var updateList = function(){ // create map of values for joining var selectedItemsValues = selectedItems.sort().join(' '), // min value minPrice = slider.slider('values', 0); // filter list items listItems.hide().filter(function(){ // get data attributes var data = this.dataset; // restrict list to price band and selections return Number(data.price) >= minPrice && (selectedItems.length ? data.category.includes(selectedItemsValues) : true); }) .show(); // count visible li only var total = $('.tabela li:visible').length; if(total === 0){ results.html('We did not find any matches.'); }else{ results.html('We found ' + total + (total === 1 ? ' match' : ' matches' ) + '!'); } } $('.sliderButtons').click(function() { var step = Number(this.dataset.step), value = slider.slider('values')[0]; value += step; slider.slider('values', 0, value); amount.val(value + " USD"); updateList(); }); }); 
 .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -0.5em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-widget-content { border: 1px solid #aaaaaa; background: white 50% 50% repeat-x; color: #222222; } .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { width: 30px; height: 30px; border: 3px solid #2F3D44; border-radius: 20px; background: white 50% 50% repeat-x; font-weight: normal; color: #555555; } .slider1Hide { display: none; } 
    

   

 
         
 

 
     
  • 10 000 USD contains 1 2 3 4
    •  
  • 12 000 USD contains 2 3
    •  
  • 13 000 USD contains 4 5
    •  
  • 14 000 USD contains 5 6
    •  
  • 12 000 USD contains 5
    •  
  • 14 000 USD contains 1 2
    •  
  • 16 000 USD contains 1 2 3
    •  
  • 20 000 USD contains 7 8
    •

我自己解决了这个问题。 我已经更改了滑块的代码以使其有效。

我改变了JS的一部分： 

 function filterPrice(products) { let minP = $("#price").slider("value"); return products.filter(function() { let value = parseInt($(this).data("price"), 10); return !(value < minP); }); }
Interesting Posts

Yepnope＆Modernizr screen.width条件

为什么这个D3代码会将元素添加到正文之外，而不是在其中？

为什么jquery .load（）不从外部网站加载文本文件？

使用jQuery删除浏览器历史记录

双jsTree实现

有没有办法等待AJAX​​响应并停止执行？

从jQuery Autocomplete Widget Ajax调用中访问$（this）DOM元素

毫秒不同步

IE6-7 Javascript

如果头404比隐藏它，jQuery检查图像存在