多個過濾器使用jQuery的數據屬性

Question

我需要使用多個過濾器使用data屬性。它在組合工作，但不能單獨工作。這裏是我的代碼：

<ul> 
    <li> 
     <div class="sts"> 
      <h1>filter 1</h1> 
      </h1> 
      <div class="checkbox"> 
       <label> 
        <input data-id="1" class="st" type="checkbox" /> 
        1 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input data-id="2" class="st" type="checkbox" /> 
        2 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input data-id="3" class="st" type="checkbox" /> 
        3 
       </label> 
      </div> 
     </div> 
    </li> 
    <li> 
     <h1>filter 2</h1> 
     <div class="ats"> 
      <div class="checkbox"> 
       <label> 
        <input data-id="foo" class="at" type="checkbox" /> 
        foo 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input data-id="boo" class="at" type="checkbox" /> 
        boo 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input data-id="bar" class="at" type="checkbox" /> 
        bar 
       </label> 
      </div> 
     </div> 
    </li> 
    <li> 
     <h1>filter 3</h1> 
     <div class="dpts"> 
      <div class="checkbox"> 
       <label> 
        <input data-id="a" class="dpt" type="checkbox" /> 
        a 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input data-id="b" class="dpt" type="checkbox" /> 
        b 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input data-id="c" class="dpt" type="checkbox" /> 
        c 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input data-id="d" class="dpt" type="checkbox" /> 
        d 
       </label> 
      </div> 
     </div> 
    </li> 
</ul> 

<ul class="list"> 
    <li data-a="foo" data-st="1" data-dpt="a">asdw</li> 
    <li data-a="boo" data-st="2" data-dpt="c">qwedf</li> 
    <li data-a="boo" data-st="1" data-dpt="a">qwedf</li> 
    <li data-a="bar" data-st="3" data-dpt="b">tazxsw</li> 
    <li data-a="bar" data-st="1" data-dpt="b">zxcvb</li> 
    <li data-a="foo" data-st="1" data-dpt="b">poiuy</li> 
    <li data-a="boo" data-st="2" data-dpt="d">lkjhg</li> 
    <li data-a="boo" data-st="3" data-dpt="d">lkjhg</li> 
</ul> 

$(function() { 
    $('.at, .dpt,.st').on('click', function() { 
     var checkedat = $('.at:checked'); 
     var checkeddept = $('.dpt:checked'); 
     var checkedst = $('.st:checked'); 
     if (checkedat.length || checkeddept.length || checkedst.length) { 
      if (checkeddept.length === 0) { 
       $('.list > li').hide(); 
       $.each(checkedat, function() { 
        var prdId = $(this).attr('data-id'); 
        $.each(checkedst, function() { 
         var brandId = $(this).attr('data-id'); 
         $('.list > li[data-a="' + prdId + '"][data-st="' + brandId + '"]').show(); 
        }); 
       }); 
      } else if (checkedat.length === 0) { 
       $('.list > li').hide(); 
       $.each(checkedst, function() { 
        var brandId = $(this).attr('data-id'); 
        $.each(checkeddept, function() { 
         var DeptId = $(this).attr('data-id'); 
         $('.list > li[data-st="' + brandId + '"][data-dpt="' + DeptId + '"]').show(); 
        }); 
       }); 
      } else if (checkedat.length === 0) { 
       $('.list > li').hide(); 
       $.each(checkeddept, function() { 
        var DeptId = $(this).attr('data-id'); 
        $.each(checkedst, function() { 
         var brandId = $(this).attr('data-id'); 
         $('.list > li[data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show(); 
        }); 
       }); 
      } else { 
       $('.list > li').hide(); 
       $.each(checkedat, function() { 
        var prdId = $(this).attr('data-id'); 
        $.each(checkedst, function() { 
         var brandId = $(this).attr('data-id'); 
         $.each(checkeddept, function() { 
          var DeptId = $(this).attr('data-id'); 
          $('.list > li[data-a="' + prdId + '"][data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show(); 
         }); 
        }); 
       }); 

      } 
     } else { 
      $('.list > li').show(); 
     } 
    }); 
}); 

這裏是一個jsFiddle link

如果我檢查從過濾器1個&過濾器2 &過濾器3的工作，但任何選項，當我點擊從過濾器1任何購股權或過濾器2它不工作

Answer 1

你的邏輯是很多複雜得多，它需要的。你應該考慮使用DRY原則，因爲你可以使這更簡單。

首先，把一個普通類上的所有複選框（我在我的例子中使用.stat）。然後使用數據屬性來表示統計的類型。從那裏你可以遍歷每個檢查的統計數據並通過使用filter()來隱藏/顯示相關的li，以基於data-stat和data-id匹配它們。是這樣的：

$('.stat').on('click', function() { 
 
    var $stats = $('.stat:checked'); 
 
    var $items = $('.list li'); 
 

 
    $items.show(); 
 
    if ($stats.length == 0) 
 
    return; 
 

 
    $stats.each(function() { 
 
    var $stat = $(this); 
 
    $items.filter(function() { 
 
     return $(this).data($stat.data('type')) != $stat.data('id'); 
 
    }).hide(); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div class="sts"> 
 
     <h1>filter 1</h1> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="1" data-type="st" class="stat st" type="checkbox" />1 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="2" data-type="st" class="stat st" type="checkbox" />2 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="3" data-type="st" class="stat st" type="checkbox" />3 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h1>filter 2</h1> 
 
    <div class="ats"> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h1>filter 3</h1> 
 
    <div class="dpts"> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c 
 
     </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<ul class="list"> 
 
    <li data-at="foo" data-st="1" data-dpt="a">asdw</li> 
 
    <li data-at="boo" data-st="2" data-dpt="c">qwedf</li> 
 
    <li data-at="boo" data-st="1" data-dpt="a">qwedf</li> 
 
    <li data-at="bar" data-st="3" data-dpt="b">tazxsw</li> 
 
    <li data-at="bar" data-st="1" data-dpt="b">zxcvb</li> 
 
    <li data-at="foo" data-st="1" data-dpt="b">poiuy</li> 
 
    <li data-at="boo" data-st="2" data-dpt="d">lkjhg</li> 
 
    <li data-at="boo" data-st="3" data-dpt="d">lkjhg</li> 
 
</ul>

在每個選定的選項上面正在執行 '與' 邏輯。要將其更改爲'OR'，請使用以下內容：

$('.stat').on('click', function() { 
    var $stats = $('.stat:checked'); 
    var $items = $('.list li'); 

    if ($stats.length == 0) { 
    $items.show(); 
    return; 
    } 

    $items.hide(); 
    $stats.each(function() { 
    var $stat = $(this); 
    $items.filter(function() { 
     return $(this).data($stat.data('type')) == $stat.data('id'); 
    }).show(); 
    }) 
});