Carrear
Erfahrenes Mitglied
Hi Leute,
Ich habe mehrere Container, denen ich Data Attribute mitgebe nach denen Sie gefiltert sind. Das funktioniert auch alles wunderbar, wobei mir immer sowohl alle Container angezeigt werden, die Kriterium 1 erfüllen, als auch alle die Kriterium 2 erfüllen. Ich muss es aber irgendwie schaffen ,dass eben nur die angezeigt werden, die sowohl Kriterium 1 als auch Kriterium 2 erfüllen. Kann mir jmd. auf die Sprünge helfen?
(Ist hier also sowohl Torte, als auch Muffins markiert soll nur der Container angezeigt werden, der auch beide Kategorien hat)
HTML:
Javascript:
Ich habe mehrere Container, denen ich Data Attribute mitgebe nach denen Sie gefiltert sind. Das funktioniert auch alles wunderbar, wobei mir immer sowohl alle Container angezeigt werden, die Kriterium 1 erfüllen, als auch alle die Kriterium 2 erfüllen. Ich muss es aber irgendwie schaffen ,dass eben nur die angezeigt werden, die sowohl Kriterium 1 als auch Kriterium 2 erfüllen. Kann mir jmd. auf die Sprünge helfen?
(Ist hier also sowohl Torte, als auch Muffins markiert soll nur der Container angezeigt werden, der auch beide Kategorien hat)
HTML:
HTML:
<div class="cols-4 m-cols-2 filter underlayed" data-filter="Kategorie">
<h3>Kategorie</h3>
<form>
<a class="alle">Alle</a>
<label for="Muffins">
<input type="checkbox" name="Frequenz" id="Muffins" value="Muffins"><span>Muffins</span>
</label>
<label for="Torte">
<input type="checkbox" name="Frequenz" id="Torte" value="Torte"><span>Torte</span>
</label>
</form>
</div>
<article data-Kategorie="Muffins">
<h3>Bericht 1</h3>
<div class="underlayed">
<p>Beschreibung</p>
<p class="clearfix"> </p>
</div>
</article>
<article data-Kategorie="Torte">
<h3>Bericht 2</h3>
<div class="underlayed">
<p>Beschreibung</p>
<p class="clearfix"> </p>
</div>
</article>
<article data-Kategorie="Muffins Torte">
<h3>Bericht 3</h3>
<div class="underlayed">
<p>Beschreibung</p>
<p class="clearfix"> </p>
</div>
</article>Javascript:
Code:
function showAll(el){
var filterEl = $(el).closest(".filter");
$(filterEl).find("input[type=radio],input[type=checkbox]").attr("checked", false);
var filterVocabulary = $(filterEl).attr("data-filter");
$("article[class*=filtered-" + filterVocabulary + "]").removeClass("filtered-" + filterVocabulary);
var markedEl = $("div[data-filter] input:checked").length;
if (!markedEl){ $(".products").removeClass("filtercontainer"); };
var i = 0;
}
$(document).ready(function(){
$(".filter input[type=radio],.filter input[type=checkbox]").click(function(){
var geCheckt = $(".filter input[type=radio]:checked,.filter input[type=checkbox]:checked").length;
if(geCheckt != 0) {
$(".products").addClass("filtercontainer");
$(".products article").each(function(){
var actProduct = this;
$("div[data-filter]").each(function(){
var vocabulary = $(this).attr("data-filter");
$(actProduct).removeClass("filtered-" + vocabulary);
$(this).find("input:checked").each(function(){
var term = $(this).val();
$(actProduct).filter("[data-" + vocabulary + "*=" + term + "]").addClass("filtered-" + vocabulary);
});
});
});
} else {
showAll(this);
}
});
$(".filter .alle").click(function(){
showAll(this);
});
});
****?