javascript - 使用单选框和价格 slider 的 jQuery 产品过滤器

Question

我需要能够根据价格( slider )和单选框过滤产品。看看这里的其他帖子，我已经设法获得了基本功能。问题是我的过滤器现在可以与 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

问题是筛选功能需要考虑选择的品牌和团队，而不仅仅是价格。您仅在 slider 事件上按价格过滤，并且在点击事件上仅按类别过滤。您需要在每个 事件中执行这两项。

我更新了你的 fiddle 来做这两件事: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 被降级到全局闭包中，以便可以在任何事件回调中过滤价格。