Is it possible to have one change also fire another change event and vice versa so that they work together?
/* Filter function LANGUAGE */
$('input[type=radio][name=languagefilter]').change(function() {
$language = this.value;
$(".standardtaskcheckboxwrapper").hide();
$(".standardtaskcheckboxwrapper." + $language).show();
});
/* Filter function CATEGORYTYPE */
$('input[type=radio][name=associateddomain]').change(function() {
$dataCatType = $(this).attr('data-cat-type');
console.log($dataCatType);
$(".standardtaskcheckboxwrapper").hide();
$(".standardtaskcheckboxwrapper." + $dataCatType).show();
$(".standardtaskcheckboxwrapper." + 'all').show();
});
The HTML for this is something like this:
<div>
<div class="standardtaskcheckboxwrapper nl cat-1"></div>
<div class="standardtaskcheckboxwrapper nl cat-2"></div>
<div class="standardtaskcheckboxwrapper nl cat-3"></div>
<div class="standardtaskcheckboxwrapper nl cat-4"></div>
<div class="standardtaskcheckboxwrapper de cat-1"></div>
<div class="standardtaskcheckboxwrapper de cat-2"></div>
<div class="standardtaskcheckboxwrapper de cat-3"></div>
<div class="standardtaskcheckboxwrapper en cat-1"></div>
<div class="standardtaskcheckboxwrapper en cat-2"></div>
<div class="standardtaskcheckboxwrapper en cat-3"></div>
<div class="standardtaskcheckboxwrapper en cat-4"></div>
</div>`
The problem that I have now is that when you select in the category radio cat-3
it filters correctly but when you then also set the language to for instance nl
it will show all categories associated with the nl
. I know that this is correct behavior for the way the code is now but I don't know how to adapt it so that both filters work together. Thanks everyone for helping me!
Just chain them together and remove the duplicate line $(".standardtaskcheckboxwrapper").hide();
like this:
$('input[type=radio][name=languagefilter], input[type=radio][name=associateddomain]').change(function() {
$language = this.value;
$(".standardtaskcheckboxwrapper").hide();
$(".standardtaskcheckboxwrapper." + $language).show();
$dataCatType = $(this).attr('data-cat-type');
console.log($dataCatType);
$(".standardtaskcheckboxwrapper." + $dataCatType).show();
$(".standardtaskcheckboxwrapper." + 'all').show();
});