2

我有这个 jsfiddle http://jsfiddle.net/danieltulp/gz5gN/

我想要做的是使用大约 6 个滑块来适应数据属性的无序列表。但对于我的发展，我只使用了两个

第一个问题：质量滑块工作得很好，但是当我滑动价格滑块时，它会将 minP 和 maxP 变量视为对象，为什么？我该如何解决？

第二个问题：我的代码现在非常混乱，我必须编写特定于每个过滤器的代码（即：价格、质量等），我怎样才能简化/缩短我的代码？

小提琴的代码：

html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
<div class="demo">
    price<br />
    <div id="price"></div>
    quality<br />
    <div id="quality"></div>
    <ul id="products">
        <li data-price="10" data-quality="20"> product - £10 q20</li>
        <li data-price="50" data-quality="40"> product - £50 q40</li>
        <li data-price="100" data-quality="80"> product - £100 q80</li>
        <li data-price="150" data-quality="30"> product - £150 q30</li>
        <li data-price="200" data-quality="40"> product - £200 q40</li>
    </ul>
</div>

Javascript

function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 250,
        values: [0, 250],
        slide: function(event, ui) {
            if(event.target.id = "price"){
                var minP = ui.values[0],
                      maxP = ui.values[1],
                      minQ = $("#quality").slider("values", 0),
                      maxQ = $("#quality").slider("values", 1);
             }
            if(event.target.id = "quality"){
                var minP = $("#price").slider("values", 0),
                      maxP = $("#price").slider("values", 1),
                       minQ = ui.values[0],
                       maxQ = ui.values[1];
              }
              alert(minP +", "+ maxP +", "+ minQ +", "+ maxQ);
              showProducts(minP, maxP, minQ, maxQ);
          }
      };

     $("#price").slider(options);
     $("#quality").slider(options);
  });

编辑：如果我将 if 质量声明移到价格声明之上，则最小最大变量是对象的第一个问题也会发生在质量滑块上。价格值是正确的。因此，幻灯片函数中的 if 语句似乎有问题。

4

2 回答 2

2

似乎有一个非常方便的 jquery 插件，叫做 filter.js

演示：http: //jiren.github.com/filter.js/filterjs.html

github：https ://github.com/jiren/filter.js

教程：http ://blog.joshsoftware.com/2011/09/28/filter-js-client-side-search-filtering-using-json-and-jquery/

于 2012-07-30T08:55:30.763 回答
0

似乎将幻灯片事件更改为更改允许我使用

change: function(event, ui) {
        var minP = $("#price").slider("values", 0);
        var maxP = $("#price").slider("values", 1);
        var minQ = $("#quality").slider("values", 0);
        var maxQ = $("#quality").slider("values", 1);
        showProducts(minP, maxP, minQ, maxQ);
    }

这在滑动事件中是不可能的，因为这些语句在滑动过程中触发滑动事件时采用旧值（在 iPad 上测试，我不确定这如何与实际鼠标一起使用）参见http://jqueryui.com/demos/滑块/#event-slide了解更多信息

工作jsfiddle http://jsfiddle.net/danieltulp/gz5gN/42/

现在我仍然需要简化/缩短我的代码

编辑：

我有一个想法，至少可以制作更清晰的代码

首先我需要确定滑块值是增加还是减少，然后我可以过滤仅显示或隐藏的列表项以隐藏或显示

这仅允许影响已过滤的列表项，因此我不需要像在以前的代码中那样再次隐藏它们

但是我的 jsfiddle 在我的代码中出现了问题，但我无法缩小范围，有什么想法吗？ http://jsfiddle.net/danieltulp/4uF3e/4/

于 2012-07-27T12:40:00.023 回答