0

複数の属性に基づく非常に単純なフィルター システムを構築しようとしています。

私の例では、次を使用しました。

  • 性別
  • 身長

「男/女」と「背が低い/高い」のどちらかを選べるようにしたいです。したがって、可能な組み合わせは次の 4 つです。

  • 男性/ショート
  • 男性/高身長
  • 女性/ショート
  • 女性/高身長

各フィルタ グループに 2 つの選択肢しかない場合、一度にチェックできるのは 1 つだけです。

私が直面している問題は単純なロジックです。現在、「男性」をクリックすると女性が非表示になります。ただし、「Tall」をクリックすると、「Tall」の人だけが表示されます。

この基本的なシステムを構築するためのエレガントなソリューションがあるかどうか疑問に思っていますか?

ありがとうございました！

http://jsbin.com/ixokek/1

4

2 に答える 2

1

現在のフィルター設定のみを気にします。あなたは他のことを考慮に入れません。すべてのフィルター設定を読み取る共通のフィルター関数と、アクティブな状態を単に交換するだけのクリック ハンドラー ( http://jsbin.com/ixokek/7/ ) があれば、間違いなくより洗練されたものになります。

$('#filter li').click(function(){
    $(this).siblings().removeClass("active");  // remove active from other
    $(this).toggleClass("active");  // toggle active on current
    filter();  // filter elements
});

var filter = function() {
  // array of classes that items need to have
  var classes = $("#filter li.active")
      .map(function() {
        return $(this).data("filter");
      })
      .toArray();

  $(".item").each(function() {
    var $this = $(this);

    // it should show if it has all classes as the settings say
    var show = classes.every(function(aClass) {
      return $this.hasClass(aClass);  // class is a reserved word
    });

    // toggle appropriately
    if(show) {
      $this.fadeIn(200);
    } else {
      $this.fadeOut(200);
    }
  });
};
于 2012-08-29T17:27:40.673 に答える
1 
$('#filter li').on('click', function(){
    $(this).toggleClass('active').siblings().removeClass('active');
    var gender = $('#filter ul').eq(0).find('.active').data('filter')||'',
        height = $('#filter ul').eq(1).find('.active').data('filter')||'',
        sel = '.item'+(gender!=''?'.'+gender:'')+(height!=''?'.'+height:'');
    $(sel).fadeIn(200)
    $('.item').not(sel).fadeOut(200);
});​

フィドル

于 2012-08-29T17:40:10.113 に答える