1

我需要能够根据价格（滑块）和单选框过滤产品。在这里查看其他帖子，我设法获得了基本功能。问题是我的过滤器现在可以与 OR 一起使用，而我需要它来与 AND 一起使用。

例如，我需要能够获得 Brand1、TeamA 和价格范围从 0 到 20 的产品。这应该只有一个产品，但我得到了 7 个产品。

在实际应用中，我有 6 个不同的属性。不确定这是否重要，但以防万一。

var $filters = $("input:radio[name='brand'],input:radio[name=team]").prop('checked', false); // start all unchecked

var $categoryContent = $('#CategoryContent li');
$filters.click(function() {
$categoryContent.hide();
$filters.filter(':checked').each(function(i, el) {
    $categoryContent.filter(':contains(' + el.value + ')').show();
});
});

这是我的工作示例：http: //jsfiddle.net/unGmL/

4

1 回答 1

2

问题是过滤功能需要考虑选择的品牌和团队，而不仅仅是价格。您仅在滑块事件上按价格过滤，并且您仅在点击事件上按类别过滤。你需要在每个事件上都做这两件事。

我更新了你的小提琴来做这两件事：http: //jsfiddle.net/unGmL/16/

这是更新后的 showProducts：

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
      var $product = $(this),
          details = $product.html();
      // If min and max prices are specified, filter products by price
      if (min != null && max != null) {
        var price = parseInt($product.data("price"), 10);
        if (price < minPrice || price > maxPrice) {
          return false;
        }
      }
      var inputs = $("input:radio[name='brand']:checked,input:radio[name=team]:checked");
      // If team or brand are specified, filter products by
      // team/brand
      if (inputs.prop('checked')) {
        var found = true;
        inputs.each(function(index, cat) {
          var $input = $(this),
              cat = $input.val();
          // Both brand and team must match.
          // If brand and team are selected and one of them
          // is not matched, then product is filtered
          found = (details.indexOf(cat) >= 0) && found;
        });
        return found;
      }
      return true;
    }).show();
}

showProducts现在查看选中的单选框。如果没有选中任何单选框，则不会应用品牌和团队过滤。如果需要品牌或团队，则检查每个产品以包含所选团队（如果选中）和所选品牌（如果选中）。

变量min和max降级为全局闭包，以便可以在任何事件回调中过滤价格。

于 2013-01-06T21:52:31.107 回答