UIslider 按钮不适用于复选框过滤器

Posted

技术标签:

【中文标题】UIslider 按钮不适用于复选框过滤器【英文标题】：UIslider buttons doesn't work with checkbox filter 【发布时间】：2018-08-23 19:05:35 【问题描述】：

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

当我将按钮设置为移动滑块时，过滤器无法正常工作。当我将滑块代码从：值：[10000] 更改为：值：10000 时，问题就出现了。

这是我的代码和 jsfiddle 示例，其中包含正常工作的过滤器和不工作的按钮（只有滑块 + 复选框过滤在该示例中有效，以显示我需要如何过滤产品）。 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：

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>



<input type="text" id="amount" readonly >
<div class="slider" id="price" ></div><br>
<div class="sliderButtons" step="500">+ Increase</div>
<div class="sliderButtons" step="-500">- Decrease</div>

<br><br>
            <div class="tabela-wrap">   
                    <label style="number"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
                    <label style="number"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
                    <label style="number"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
                    <label style="number"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
                    <label style="number"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
                    <label style="number"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
                    <label style="number"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
                    <label style="number"><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label> 
            </div>

            <br><br>

           <ul class="tabela lokata" id="products">
                <li class="tabelki" data-price="10000" data-category="1 2 3 4 ">10 000 USD contains 1 2 3 4</li>
                <li class="tabelki" data-price="12000" data-category="2 3">12 000 USD contains 2 3</li>
                <li class="tabelki" data-price="13000" data-category="4 5">13 000 USD contains 4 5</li>
                <li class="tabelki" data-price="14000" data-category="5 6 ">14 000 USD contains 5 6</li>
                <li class="tabelki" data-price="12000" data-category="5">12 000 USD contains 5</li>
                <li class="tabelki" data-price="14000" data-category="1 2">14 000 USD contains 1 2</li>
                <li class="tabelki" data-price="16000" data-category="1 2 3">16 000 USD contains 1 2 3</li>
                <li class="tabelki" data-price="20000" data-category="7 8">20 000 USD contains 7 8</li>

            </ul>

          <div class="tabela-wrap">  
            <label id="found"></label>
          </div>

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 < minP);
  );


function filterCheckboxes(products) 
  checkboxes = $("input:checked").filter(function() 
    return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
  ).map(function() 
    return this.value;
  );


  if (checkboxes.length == 0) 
    return products;
  

  return products.filter(function() 
    categories = $(this).data("category").toString().split(" ");
    let val = true;
    checkboxes.each(function() 
      if (!categories.includes(this[0])) 
        val = false;
        return;
      
    );
    return val;
  );



function filterProducts() 
  products = $("#products li");
  products.hide();
  products = filterPrice(products);
  products = filterCheckboxes(products);
  products.show();

  let numItems = products.length;

  if (numItems > 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");
);

【问题讨论】：

【参考方案1】：

这是预期的功能吗？

$(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;

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

<input type="text" id="amount" readonly>

<div class="slider" id="price"></div><br>

<button class="sliderButtons" data-step="500">+ Increase</button>
<button class="sliderButtons" data-step="-500">- Decrease</button>

<br><br>

<div class="tabela-wrap">   
  <label for="1"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
  <label for="2"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
  <label for="3"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
  <label for="4"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
  <label for="5"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
  <label for="6"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
  <label for="7"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
  <label for="8"><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label> 
</div>

<br><br>

<ul class="tabela lokata" id="products">
  <li class="tabelki" data-price="10000" data-category="1 2 3 4 ">10 000 USD contains 1 2 3 4</li>
  <li class="tabelki" data-price="12000" data-category="2 3">12 000 USD contains 2 3</li>
  <li class="tabelki" data-price="13000" data-category="4 5">13 000 USD contains 4 5</li>
  <li class="tabelki" data-price="14000" data-category="5 6 ">14 000 USD contains 5 6</li>
  <li class="tabelki" data-price="12000" data-category="5">12 000 USD contains 5</li>
  <li class="tabelki" data-price="14000" data-category="1 2">14 000 USD contains 1 2</li>
  <li class="tabelki" data-price="16000" data-category="1 2 3">16 000 USD contains 1 2 3</li>
  <li class="tabelki" data-price="20000" data-category="7 8">20 000 USD contains 7 8</li>
</ul>

<div id="results"></div>

【讨论】：

效果很好！谢谢！我只是想知道我和你的解决方案有什么区别。【参考方案2】：

我自己解决了这个问题。我已经更改了滑块的代码以使其正常工作。

我修改了部分JS：

function filterPrice(products) 
  let minP = $("#price").slider("value");

  return products.filter(function() 
    let value = parseInt($(this).data("price"), 10);
    return !(value < minP);
  );

【讨论】：

以上是关于UIslider 按钮不适用于复选框过滤器的主要内容，如果未能解决你的问题，请参考以下文章

过滤器不透明度不适用于复选框（IE8）

WPF 双向绑定不适用于组合框中的复选框

GetCheck() 适用于检查按钮但不适用于单选按钮？

Laravel 复选框过滤器 ajax

ajax - 为啥 onclick 不适用于复选框

TextAlignment 不适用于复选框