1

価格（スライダー）とラジオボックスに基づいて製品をフィルタリングできる必要があります。ここで他の投稿を見て、私はなんとか基本的な機能を手に入れることができました。問題は、私のフィルターが現在ORで機能し、代わりにANDで機能する必要があることです。

たとえば、Brand1、TeamA、価格範囲が0〜20の製品を取得できる必要があります。これは、1つの製品のみである必要がありますが、代わりに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 に答える