Логика для фильтрации JQuery через несколько категорий

Question

Я не могу обвести вокруг себя логику.

Мой JQuery:

<script> 
    $(document).ready(function() { 
     $('div.filter-groups').find('input:checkbox').live('click', function() { 
      $('.general').hide(); 
      $('div.filter-groups').find('input:checked').each(function() { 
       $('.general').hide(); 
       $('div.general.' + $(this).attr('rel')).show(); 
      }); 
     }); 
    });</script> 

Мои флажков:

<div class="filter-groups"> 
          <div class="filter-label">Price:</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Tier1">$100,000-$160,000</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Tier2">$160,000-$200,000</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Tier3">$200,000-$250,000</div> 
          <div class="filter-label">Number Of Rooms:</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Rooms3">3 Bedroom</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Rooms4">4 Bedroom</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Rooms5">5 Bedroom</div> 
          <div class="filter-label">Square Footage:</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Foot1">1,200-1,600</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Foot2">1,600-2,000</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Foot3">2,000+</div> 
          <div class="filter-label">Neighborhoods:</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="CityView">City View</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="HeritageHills">Heritage Hills</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="HillsideTerrace">Hillside Terrace</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="LonesomeDove">Lonesome Dove</div> 
          <div class="filter"><input type="checkbox" name="price" value="" rel="Tradewinds">Tradewinds</div> 
         </div> 

Скрипт работает в том, что если нажать на флажок будет показывать DIV, содержащий класс, который соответствует «отн = "этого флажка.

Это работает, за исключением того, что если я проверю первый фильтр цены и фильтр первого соседства, он покажет дом, который находится в этом районе, хотя он принадлежит второму ценовому фильтру.

Мне нужен этот скрипт, чтобы принимать во внимание все секции фильтра при отображении результата. Этот вопрос задавали несколько раз, но они используют другой метод для любых предложений?

jsfiddle, где я не могу получить рабочий код для работы: http://jsfiddle.net/jonathanSumner90/nh8vr1kp/

веб-страницы, на которой он работает, но не так, как я пытаюсь выяснить здесь:

http://www.bluehavenhomes.com/floor-plans?hs_preview=1SQuQUzB-2347415373

---

Answer 1

В jQuery уже есть встроенная функция, называемая .filter(), которая делает то, что вы хотите достичь.

var checkboxes = $('div.filter-groups').find('input:checkbox'), 
    general = $('.general'); 

function filterCheckboxes(ev){ 
    var rel = $(ev.currentTarget).attr('rel'); 

    general.hide().filter('.' + rel).show(); 
} 

checkboxes.on('click', filterCheckboxes); 

Чтобы исправить мультипликатор проверил вопрос флажков вы можете фильтровать :checked состояние во всех ваших checkboxes и для каждого rel применить фильтр.

function filterCheckboxes(){ 
    var checked = checkboxes.filter(':checked'); 

    general.hide(); 
    $.each(checked, function(){ 
     var rel = $(this).attr('rel'); 

     general.filter('.' + rel).show(); 
    }); 
} 

Надеюсь, что это так, как планировалось.

DEMO

Слово посоветуйте: Использование data- атрибутов вместо rel быть более выразительным и/или объединить несколько фильтров на один флажок.

HTML

<input type="checkbox" name="price" value="" data-filter="Tier1" /> 

JS

var rel = $(this).data('filter');