如何将Slider与其他复选框过滤器放在一起 [英] How to put Slider together with additional checkbox filter

查看:86
本文介绍了如何将Slider与其他复选框过滤器放在一起的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在使用Ui滑块和复选框过滤器时遇到问题.它应该像这样工作:

当我使用滑块设置价格目标时,我得到了一些结果.然后,希望使用复选框通过其他过滤器对这些结果进行排序.毕竟,我应该完全符合我的要求.

相反,我得到了错误的比赛.使用滑块后,我得到了想要的东西,但是当使用复选框时,一切都崩溃了.我只得到复选框结果,没有滑块效果.我不知道如何强迫他们一起工作.

如果只使用了滑块(不单击复选框),我还想查看有关找到结果数量的信息.

这是jsfiddle示例: http://jsfiddle.net/m1z930r5/15/

HTML:

<input type="text" id="amount" readonly>
<div class="slider" id="price"></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>

CSS:

.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;
}

JavaScript:

! function(a) {
  function f(a, b) {
    if (!(a.originalEvent.touches.length > 1)) {
      a.preventDefault();
      var c = a.originalEvent.changedTouches[0],
        d = document.createEvent("MouseEvents");
      d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d)
    }
  }
  if (a.support.touch = "ontouchend" in document, a.support.touch) {
    var e, b = a.ui.mouse.prototype,
      c = b._mouseInit,
      d = b._mouseDestroy;
    b._touchStart = function(a) {
      var b = this;
      !e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown"))
    }, b._touchMove = function(a) {
      e && (this._touchMoved = !0, f(a, "mousemove"))
    }, b._touchEnd = function(a) {
      e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1)
    }, b._mouseInit = function() {
      var b = this;
      b.element.bind({
        touchstart: a.proxy(b, "_touchStart"),
        touchmove: a.proxy(b, "_touchMove"),
        touchend: a.proxy(b, "_touchEnd")
      }), c.call(b)
    }, b._mouseDestroy = function() {
      var b = this;
      b.element.unbind({
        touchstart: a.proxy(b, "_touchStart"),
        touchmove: a.proxy(b, "_touchMove"),
        touchend: a.proxy(b, "_touchEnd")
      }), d.call(b)
    }
  }
}(jQuery);


// Added this function
function data_filter(mini, maxi, data_name) {
  $("#products li").filter(function() {
    var value = parseInt($(this).data(data_name), 10);
    if (value > maxi || value < mini) {
      $(this).addClass('slider1Hide');
    }
  });
}

function showProducts() {
  // Reset filters
  $("#products li").removeClass('slider1Hide');
  // Price
  var minP = $("#price").slider("values", 0);
  var maxP = $("#price").slider("values", 1);
  data_filter(minP, maxP, "price"); // Call the new function
}

$(function() {
  var options = {

    min: 500,
    max: 100000,
    step: 500,
    values: [10000],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + " USD");
    },
    change: function(event, ui) {
      showProducts();
    }

  };

  $("#price").slider(options);
  $("#amount").val($("#price").slider("values", 0) + " USD");
});

//Checkboxes script


var byProperty = [],
  byColor = [],
  byLocation = [];

$("input[name=fl-1]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});

$("input[name=fl-2]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-3]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-4]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-5]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-6]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-7]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-8]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});

$("input").on("change", function() {
  var str = "Include items \n";
  var selector = '',
    cselector = '',
    nselector = '';

  var $lis = $('.tabela > li'),
    $checked = $('input:checked');

  if ($checked.length) {

    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-1]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-1]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }

    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-2]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-2]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-3]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-3]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-4]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-4]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-5]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-5]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-6]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-6]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-7]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-7]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-8]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-8]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }


    $lis.hide();
    console.log(selector);
    console.log(cselector);
    console.log(nselector);

    if (cselector === '' && nselector === '') {
      $('.tabela > li').filter(selector).show();
    } else if (cselector === '') {
      $('.tabela > li').filter(selector).filter(nselector).show();
    } else if (nselector === '') {
      $('.tabela > li').filter(selector).filter(cselector).show();
    } else {
      $('.tabela > li').filter(selector).filter(cselector).filter(nselector).show();
    }

  } else {
    $lis.show();
  }

  $("#result").html(str);

});

$("input").on("change", function() {
  var numberOfItems = $("li.tabelki:visible").length;

  if (numberOfItems > 0) {
    var label = "We found " + numberOfItems + " results";
  } else {
    var label = "No results found";
  }

  $("#found").text(label);
});

function removeA(arr) {
  var what, a = arguments,
    L = a.length,
    ax;
  while (L > 1 && arr.length) {
    what = a[--L];
    while ((ax = arr.indexOf(what)) !== -1) {
      arr.splice(ax, 1);
    }
  }
  return arr;
}

有人能解决这个问题吗?

解决方案

尝试一下:

我对您的代码进行了很多重构,以使其更易于阅读/理解并使内容保持干燥.我能够将行数从273行减少到73行.

 $(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' ) + '!');
    }
  }
}); 

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

JSFiddle

I have a problem with working together Ui Slider and checkbox filter. It should working like this:

When I use slider to set price target I'm getting some results. Then want those results to be sorted by additional filter using checkboxes. After all I should get exact match to my request.

Instead of that I'm getting wrong match. After using slider I get what I want but then when using checkboxes everything crush. I only get checkboxes results, without slider effect. I don't know how to force them to work together.

I also would like to see information about number of found results if only slider has been used (without clicking checkboxes).

Here's jsfiddle example: http://jsfiddle.net/m1z930r5/15/

HTML:

<input type="text" id="amount" readonly>
<div class="slider" id="price"></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>

CSS:

.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;
}

JavaScript:

! function(a) {
  function f(a, b) {
    if (!(a.originalEvent.touches.length > 1)) {
      a.preventDefault();
      var c = a.originalEvent.changedTouches[0],
        d = document.createEvent("MouseEvents");
      d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d)
    }
  }
  if (a.support.touch = "ontouchend" in document, a.support.touch) {
    var e, b = a.ui.mouse.prototype,
      c = b._mouseInit,
      d = b._mouseDestroy;
    b._touchStart = function(a) {
      var b = this;
      !e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown"))
    }, b._touchMove = function(a) {
      e && (this._touchMoved = !0, f(a, "mousemove"))
    }, b._touchEnd = function(a) {
      e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1)
    }, b._mouseInit = function() {
      var b = this;
      b.element.bind({
        touchstart: a.proxy(b, "_touchStart"),
        touchmove: a.proxy(b, "_touchMove"),
        touchend: a.proxy(b, "_touchEnd")
      }), c.call(b)
    }, b._mouseDestroy = function() {
      var b = this;
      b.element.unbind({
        touchstart: a.proxy(b, "_touchStart"),
        touchmove: a.proxy(b, "_touchMove"),
        touchend: a.proxy(b, "_touchEnd")
      }), d.call(b)
    }
  }
}(jQuery);


// Added this function
function data_filter(mini, maxi, data_name) {
  $("#products li").filter(function() {
    var value = parseInt($(this).data(data_name), 10);
    if (value > maxi || value < mini) {
      $(this).addClass('slider1Hide');
    }
  });
}

function showProducts() {
  // Reset filters
  $("#products li").removeClass('slider1Hide');
  // Price
  var minP = $("#price").slider("values", 0);
  var maxP = $("#price").slider("values", 1);
  data_filter(minP, maxP, "price"); // Call the new function
}

$(function() {
  var options = {

    min: 500,
    max: 100000,
    step: 500,
    values: [10000],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + " USD");
    },
    change: function(event, ui) {
      showProducts();
    }

  };

  $("#price").slider(options);
  $("#amount").val($("#price").slider("values", 0) + " USD");
});

//Checkboxes script


var byProperty = [],
  byColor = [],
  byLocation = [];

$("input[name=fl-1]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});

$("input[name=fl-2]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-3]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-4]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-5]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-6]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-7]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-8]").on("change", function() {
  if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
  else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});

$("input").on("change", function() {
  var str = "Include items \n";
  var selector = '',
    cselector = '',
    nselector = '';

  var $lis = $('.tabela > li'),
    $checked = $('input:checked');

  if ($checked.length) {

    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-1]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-1]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }

    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-2]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-2]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-3]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-3]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-4]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-4]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-5]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-5]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-6]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-6]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-7]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-7]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }
    if (byProperty.length) {
      if (str == "Include items \n") {
        str += "    " + "with (" + byProperty.join(',') + ")\n";
        $($('input[name=fl-8]:checked')).each(function(index, byProperty) {
          if (selector === '') {
            selector += "[data-category~='" + byProperty.id + "']";
          } else {
            selector += ",[data-category~='" + byProperty.id + "']";
          }
        });
      } else {
        str += "    AND " + "with (" + byProperty.join(' OR ') + ")\n";
        $($('input[name=fl-8]:checked')).each(function(index, byProperty) {
          selector += "[data-category~='" + byProperty.id + "']";
        });
      }
    }


    $lis.hide();
    console.log(selector);
    console.log(cselector);
    console.log(nselector);

    if (cselector === '' && nselector === '') {
      $('.tabela > li').filter(selector).show();
    } else if (cselector === '') {
      $('.tabela > li').filter(selector).filter(nselector).show();
    } else if (nselector === '') {
      $('.tabela > li').filter(selector).filter(cselector).show();
    } else {
      $('.tabela > li').filter(selector).filter(cselector).filter(nselector).show();
    }

  } else {
    $lis.show();
  }

  $("#result").html(str);

});

$("input").on("change", function() {
  var numberOfItems = $("li.tabelki:visible").length;

  if (numberOfItems > 0) {
    var label = "We found " + numberOfItems + " results";
  } else {
    var label = "No results found";
  }

  $("#found").text(label);
});

function removeA(arr) {
  var what, a = arguments,
    L = a.length,
    ax;
  while (L > 1 && arr.length) {
    what = a[--L];
    while ((ax = arr.indexOf(what)) !== -1) {
      arr.splice(ax, 1);
    }
  }
  return arr;
}

Is anybody able to solve that case?

解决方案

Try this out:

I refactored your code a lot to make it easier to read/understand and keep things DRY. I was able to reduce the line count from 273 lines to 73.

$(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' ) + '!');
    }
  }
});

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

JSFiddle

这篇关于如何将Slider与其他复选框过滤器放在一起的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆