Сценарий для фильтрации/отображения двух отдельных типов категорий

Question

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

Гигантский плюс будет для счетчика, отображающего количество отображаемых divs vs total divs.

вот код, который есть у меня сейчас.

 <select name="month-select" id="month-select"> 
     <option id="select">Select a Month</option> 
     <option value="jan" id="jan" name="jan">January</option> 
     <option value="feb" id="feb" name="feb">February</option> 
     <option value="mar" id="mar" name="mar">March</option> 
     <option value="apr" id="apr" name="apr">April</option> 
     <option value="may" id="may" name="may">May</option> 
     <option value="jun" id="jun" name="jun">June</option> 
     <option value="jul" id="jul" name="jul">July</option> 
     <option value="aug" id="aug" name="aug">August</option> 
     <option value="sep" id="sep" name="sep">September</option> 
     <option value="oct" id="oct" name="oct">October</option> 
     <option value="nov" id="nov" name="nov">November</option> 
     <option value="dec" id="dec" name="dec">December</option> 
    </select> 
    <input type="checkbox" value="red" id="red" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">red</label> 

    <input type="checkbox" value="green" id="green" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">green</label> 

    <input type="checkbox" value="blue" id="blue"onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">blue</label> 

    <input type="checkbox" value="selectall" id="selectall"onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">select all colors</label> 
    <div id="fulllist"> 
    <div class="rResult red jan mar apr may"> 
     <h3>Spring and January</h3> 
       <ul> 
        <li>Stuff</li> 
        <li>Stuff</li> 
        <li>Stuff</li> 
       </ul> 
      <a href="#">CTA</a> 
    </div> 
    <div class="rResult blue apr may dec"> 
     <h3>April May December</h3> 
       <ul> 
        <li>Stuff</li> 
        <li>Stuff</li> 
        <li>Stuff</li> 
       </ul> 
      <a href="#">CTA</a> 
    </div> 

    <div class="rResult green jul"> 
     <h3>July Only</h3> 
       <ul> 
        <li>Stuff</li> 
        <li>Stuff</li> 
        <li>Stuff</li> 
       </ul> 
      <a href="#">CTA</a> 
    </div> 
<div id="filtersContainerUpdatingMessage"> 
    <p>Updating...</p> 
</div> 

<div class="divsShowing"> 
    Showing 
     <span class="textForALL">ALL (</span> 
     <span class="divsShowing"> </span> of <span class="divsTotal"> </span> 
     <span class="textForALL">) </span> 
    Divs 
</div> 

<div class="divsShowingAreZero"> 
    <p>Please select a color and/or different month.</p> 
</div> 
    </div> 
    <script> 
     $('#month-select').change(function(){ 
      $('.rResult').each(function(){ 
       if ($(this).hasClass($('#month-select').val())) { 
        $(this).show(); 
       } else { 
        $(this).hide(); 
       } 
      }); 
     }); 
    </script> 

Answer 1

Попробуйте подход ниже. Это унифицированный способ обработки фильтров.

Обратите внимание на следующие пункты.

• новый класс для флажков добавляются кроме selectall
• Все функции изменения будут вызывать такую ​​же общую функцию, SelectAll будет проверять и снимите флажок проверки цвета коробки, а затем вызывает общую функцию.

$('#month-select').change(function() { 
 
    window.filter(); 
 
}); 
 
window.Color = { 
 
    filterByColor: function() { 
 
    window.filter(); 
 
    }, 
 
    filterByColorSelectAll: function() { 
 
    if ($("#selectall").is(":checked")) 
 
     $(".checkColor").prop("checked", "checked"); 
 
    else 
 
     $(".checkColor").removeProp("checked"); 
 
    window.filter(); 
 
    }, 
 
} 
 
window.filter = function() { 
 
    var month = $('#month-select').val(); 
 
    if (month == null || month == "") 
 
    $('.rResult').show(); //show all 
 
    else { 
 
    $('.rResult').hide(); // hide all 
 
    $('.rResult.' + month).show(); //filter by month 
 
    } 
 
    var strColorFilter = []; 
 
    var checkedItems = $(".checkColor:not(:checked)").map(function(i, o) { 
 
    return "." + o.id; 
 
    }).get(); 
 
    //filter by color 
 
    if (checkedItems.length == 0) return; 
 
    strColorFilter.push(".rResult:visible"); //take on visible after month filter 
 
    strColorFilter.push(checkedItems); 
 
    $(strColorFilter.join("")).hide(); 
 
}

.rResult {}

<select name="month-select" id="month-select"> 
 
    <option value="" id="select">Select a Month</option> 
 
    <option value="jan" id="jan" name="jan">January</option> 
 
    <option value="feb" id="feb" name="feb">February</option> 
 
    <option value="mar" id="mar" name="mar">March</option> 
 
    <option value="apr" id="apr" name="apr">April</option> 
 
    <option value="may" id="may" name="may">May</option> 
 
    <option value="jun" id="jun" name="jun">June</option> 
 
    <option value="jul" id="jul" name="jul">July</option> 
 
    <option value="aug" id="aug" name="aug">August</option> 
 
    <option value="sep" id="sep" name="sep">September</option> 
 
    <option value="oct" id="oct" name="oct">October</option> 
 
    <option value="nov" id="nov" name="nov">November</option> 
 
    <option value="dec" id="dec" name="dec">December</option> 
 
</select> 
 
<input type="checkbox" value="red" id="red" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor"> 
 
<label for="ck-loc-us">red</label> 
 

 
<input type="checkbox" value="green" id="green" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor"> 
 
<label for="ck-loc-us">green</label> 
 

 
<input type="checkbox" value="blue" id="blue" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor"> 
 
<label for="ck-loc-us">blue</label> 
 

 
<input type="checkbox" value="selectall" id="selectall" onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor"> 
 
<label for="ck-loc-us">select all colors</label> 
 
<div id="fulllist"> 
 
    <div class="rResult red jan mar apr may"> 
 
    <h3>Spring and January</h3> 
 
    <ul> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
    </ul> 
 
    <a href="#">CTA</a> 
 
    </div> 
 
    <div class="rResult blue apr may dec"> 
 
    <h3>April May December</h3> 
 
    <ul> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
    </ul> 
 
    <a href="#">CTA</a> 
 
    </div> 
 

 
    <div class="rResult green jul"> 
 
    <h3>July Only</h3> 
 
    <ul> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
     <li>Stuff</li> 
 
    </ul> 
 
    <a href="#">CTA</a> 
 
    </div> 
 
    <div id="filtersContainerUpdatingMessage"> 
 
    <p>Updating...</p> 
 
    </div> 
 

 
    <div class="divsShowing"> 
 
    Showing 
 
    <span class="textForALL">ALL (</span> 
 
    <span class="divsShowing"> </span> of <span class="divsTotal"> </span> 
 
    <span class="textForALL">) </span> Divs 
 
    </div> 
 

 
    <div class="divsShowingAreZero"> 
 
    <p>Please select a color and/or different month.</p> 
 
    </div> 
 
</div>

Демо: http://jsfiddle.net/kishoresahas/2kGzZ/165