我可以让两个change事件监听器互相触发吗？

Question

有没有可能让一个变更同时触发另一个变更事件，反之亦然，这样它们就可以协同工作了？

    /* 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>`

我现在的问题是，当您在类别中选择单选cat-3时，它会正确过滤，但当您将语言设置为例如nl时，它将显示与nl关联的所有类别。我知道对于现在的代码来说，这是正确的行为，但我不知道如何调整它，以便两个过滤器一起工作。感谢大家对我的帮助！

Answer 1

只需将它们链接在一起，并删除重复的行$(".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();

});

Answer 2

​

$('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>

​