Search code examples
javascripthtmljqueryonchange

Can I make two change event listeners fire each other?


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!


Solution

  • 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();
    
    });