我可以让两个更改事件侦听器相互触发吗?
Can I make two change event listeners fire each other?
是否可以让一个更改同时触发另一个更改事件,反之亦然,以便它们一起工作?
/* 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();
});
HTML 是这样的:
<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>`
我现在遇到的问题是,当您 select 在类别收音机 cat-3
中时,它会正确过滤,但是当您将语言设置为例如 nl
时,它会显示与 nl
关联的所有类别。我知道这是代码现在的正确行为,但我不知道如何调整它以便两个过滤器一起工作。谢谢大家帮助我!
只需将它们链接在一起并删除重复的行 $(".standardtaskcheckboxwrapper").hide();
,如下所示:
$('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();
});
$('input[type=radio][name=languagefilter]').change(function() {
filter()
});
$('input[type=radio][name=associateddomain]').change(function() {
filter()
});
function filter(){
$language = $('input[name=languagefilter]:checked').val();
$dataCatType = $('input[name=associateddomain]:checked').val();
$language=$language ? "."+ $language :"";
$dataCatType=$dataCatType ? "."+ $dataCatType:""
$(".standardtaskcheckboxwrapper").hide();
$($language + $dataCatType).show();
}
<input type="radio" name="languagefilter" value="nl">n1
<input type="radio" name="languagefilter" value="de">de
<input type="radio" name="languagefilter" value="en">en
<input type="radio" name="associateddomain" value="cat-1">cat1
<input type="radio" name="associateddomain" value="cat-2">cat2
<input type="radio" name="associateddomain" value="cat-3">cat3
<input type="radio" name="associateddomain" value="cat-4">cat4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="standardtaskcheckboxwrapper nl cat-1">1</div>
<div class="standardtaskcheckboxwrapper nl cat-2">2</div>
<div class="standardtaskcheckboxwrapper nl cat-3">3</div>
<div class="standardtaskcheckboxwrapper nl cat-4">4</div>
<div class="standardtaskcheckboxwrapper de cat-1">5</div>
<div class="standardtaskcheckboxwrapper de cat-2">6</div>
<div class="standardtaskcheckboxwrapper de cat-3">7</div>
<div class="standardtaskcheckboxwrapper en cat-1">8</div>
<div class="standardtaskcheckboxwrapper en cat-2">9</div>
<div class="standardtaskcheckboxwrapper en cat-3">10</div>
<div class="standardtaskcheckboxwrapper en cat-4">11</div>
</div>
是否可以让一个更改同时触发另一个更改事件,反之亦然,以便它们一起工作?
/* 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();
});
HTML 是这样的:
<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>`
我现在遇到的问题是,当您 select 在类别收音机 cat-3
中时,它会正确过滤,但是当您将语言设置为例如 nl
时,它会显示与 nl
关联的所有类别。我知道这是代码现在的正确行为,但我不知道如何调整它以便两个过滤器一起工作。谢谢大家帮助我!
只需将它们链接在一起并删除重复的行 $(".standardtaskcheckboxwrapper").hide();
,如下所示:
$('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();
});
$('input[type=radio][name=languagefilter]').change(function() {
filter()
});
$('input[type=radio][name=associateddomain]').change(function() {
filter()
});
function filter(){
$language = $('input[name=languagefilter]:checked').val();
$dataCatType = $('input[name=associateddomain]:checked').val();
$language=$language ? "."+ $language :"";
$dataCatType=$dataCatType ? "."+ $dataCatType:""
$(".standardtaskcheckboxwrapper").hide();
$($language + $dataCatType).show();
}
<input type="radio" name="languagefilter" value="nl">n1
<input type="radio" name="languagefilter" value="de">de
<input type="radio" name="languagefilter" value="en">en
<input type="radio" name="associateddomain" value="cat-1">cat1
<input type="radio" name="associateddomain" value="cat-2">cat2
<input type="radio" name="associateddomain" value="cat-3">cat3
<input type="radio" name="associateddomain" value="cat-4">cat4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="standardtaskcheckboxwrapper nl cat-1">1</div>
<div class="standardtaskcheckboxwrapper nl cat-2">2</div>
<div class="standardtaskcheckboxwrapper nl cat-3">3</div>
<div class="standardtaskcheckboxwrapper nl cat-4">4</div>
<div class="standardtaskcheckboxwrapper de cat-1">5</div>
<div class="standardtaskcheckboxwrapper de cat-2">6</div>
<div class="standardtaskcheckboxwrapper de cat-3">7</div>
<div class="standardtaskcheckboxwrapper en cat-1">8</div>
<div class="standardtaskcheckboxwrapper en cat-2">9</div>
<div class="standardtaskcheckboxwrapper en cat-3">10</div>
<div class="standardtaskcheckboxwrapper en cat-4">11</div>
</div>