Question

我需要能够根据价格（滑块）和收音机盒过滤产品。看看这里的其他帖子我已经设法获得基本功能。问题是我的过滤器现在正在使用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/

Answer 1

问题在于过滤功能需要考虑所选择的品牌和团队，而不仅仅是价格。您只是按滑块事件的价格进行过滤，而您只是按点击事件的类别进行过滤。您需要在每个事件中这两件事。

我更新了你的小提琴来完成这两件事：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被降级为全局闭包，因此可以在任何事件回调中过滤价格。

jQuery产品过滤器使用无线电盒和价格滑块

1 个答案: