jQuery - фильтрация div с помощью checkbox issue

Question

Я работаю над проектом для фильтрации div с использованием checkboxes, и до сих пор у меня он работает, но мне не хватает одного куска головоломки.

Когда вы делаете выбор, например Slider, он покажет единственный вариант с Slider.

Если вы выберите Full Width он покажет все варианты с SliderиFull Width

Что я хочу это только варианты шоу с какSlider и Full Width так что вы бы не получить результат с Fader и Full Width

Надеюсь, что это имеет смысл

$(document).ready(function() { 
 

 
    var sections = $('.sectionContent'); 
 

 
    function updateContentVisibility() { 
 
    var checked = $("#filterControls :checkbox:checked"); 
 
    if (checked.length) { 
 
     sections.hide(); 
 
     checked.each(function() { 
 
     $("." + $(this).val()).show(); 
 
     }); 
 
    } else { 
 
     sections.show(); 
 
    } 
 
    } 
 

 
    $("#filterControls :checkbox").click(updateContentVisibility); 
 
    updateContentVisibility(); 
 

 
});

#filterControls label { 
 
    display: block; 
 
} 
 
.box { 
 
    height: 100px; 
 
    background: #eee; 
 
    width: 300px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
    margin: 5px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="filterControls"> 
 
    <label><b>Image Header Type</b> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" value="Slider" name="SliderCheck" />Slider</label> 
 
    <label> 
 
    <input type="checkbox" value="Fader" name="FaderCheck" />Fader</label> 
 
    <label> 
 
    <input type="checkbox" value="Static" name="StaticCheck" />Static</label> 
 
    <label><b>Image Header Styles</b> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" value="Full-Width" name="SliderCheck" />Full Width</label> 
 
    <label> 
 
    <input type="checkbox" value="Full-Screen" name="FaderCheck" />Full Screen</label> 
 
    <label> 
 
    <input type="checkbox" value="Arrow-Navigation" name="CustomCheck" />Arrow Navigation</label> 
 
</div> 
 

 
<div id="siteFilter"> 
 
    <div class="sectionContent box Slider Full-Width Full-Screen Arrow-Navigation" style="display: inline-block;"> 
 
    <a href="http://www.twelve.com.au/" target="_blank">Slider/Full Width</a> 
 
    </div> 
 
    <div class="sectionContent box Fader Full-Width Arrow-Navigation" style="display: inline-block;"> 
 
    <a href="http://www.galpins.com.au/" target="_blank">Fader/Full Width</a> 
 
    </div> 
 
    <div class="sectionContent box Static Full-Width" style="display: inline-block;"> 
 
    <a href="http://www.wmcaccounting.com.au/" target="_blank">Static/Full Width</a> 
 
    </div> 
 
</div>

Answer 1

Для того, чтобы выбрать конкретный элемент, который имеет два класса, нужно, чтобы объединить все классы, разделяя их . s без пробелов как .class1.class2.class3, делать, что вам нужно обновить ваша updateContentVisibility логика, проверить это:

$(document).ready(function() { 
 

 
    var sections = $('.sectionContent'); 
 

 
    function updateContentVisibility() { 
 
    var checked = $("#filterControls :checkbox:checked"); 
 
    if (checked.length) { 
 
     sections.hide(); 
 
     var selectedClasses = ""; 
 
     checked.each(function() { 
 
     selectedClasses += "." + $(this).val(); 
 

 
     }); 
 
     $(selectedClasses).show(); 
 
    } else { 
 
     sections.show(); 
 
    } 
 
    } 
 

 
    $("#filterControls :checkbox").click(updateContentVisibility); 
 
    updateContentVisibility(); 
 

 
});

#filterControls label { 
 
    display: block; 
 
} 
 
.box { 
 
    height: 100px; 
 
    background: #eee; 
 
    width: 300px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
    margin: 5px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="filterControls"> 
 
    <label><b>Image Header Type</b> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" value="Slider" name="SliderCheck" />Slider</label> 
 
    <label> 
 
    <input type="checkbox" value="Fader" name="FaderCheck" />Fader</label> 
 
    <label> 
 
    <input type="checkbox" value="Static" name="StaticCheck" />Static</label> 
 
    <label><b>Image Header Styles</b> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" value="Full-Width" name="SliderCheck" />Full Width</label> 
 
    <label> 
 
    <input type="checkbox" value="Full-Screen" name="FaderCheck" />Full Screen</label> 
 
    <label> 
 
    <input type="checkbox" value="Arrow-Navigation" name="CustomCheck" />Arrow Navigation</label> 
 
</div> 
 

 
<div id="siteFilter"> 
 
    <div class="sectionContent box Slider Full-Width Full-Screen Arrow-Navigation" style="display: inline-block;"> 
 
    <a href="http://www.twelve.com.au/" target="_blank">Slider/Full Width</a> 
 
    </div> 
 
    <div class="sectionContent box Fader Full-Width Arrow-Navigation" style="display: inline-block;"> 
 
    <a href="http://www.galpins.com.au/" target="_blank">Fader/Full Width</a> 
 
    </div> 
 
    <div class="sectionContent box Static Full-Width" style="display: inline-block;"> 
 
    <a href="http://www.wmcaccounting.com.au/" target="_blank">Static/Full Width</a> 
 
    </div> 
 
</div>