Как предварительно установить флажок и выполнить функцию, основанную на хеше URL

Question

Я новичок, поэтому надеюсь, что мое объяснение имеет смысл.

Я настраиваю страницу со списком продуктов с разделом фильтра флажков.Я хотел бы иметь возможность предварительно выбрать параметры и применить фильтр / функцию на основе URL-хеша ссылки с предыдущей страницы.

У меня есть js для функции фильтра ...

$('.category').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
        var category = $(this).val();
        category_list.push(category); //Push each check item's value into an array
    });

    if(category_list.length == 0) {
        $('.resultblock').fadeIn();
    }
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > -1){ //Check if data-tag's value is in array
          $(this).fadeIn('slow');
        }
        else{
          $(this).fadeOut('fast');
        }
      });
    }
});

и js, чтобы предварительно установить флажок на основе хеша URL ...

$(document).ready(function(){
    var hash = location.hash;  
    if(hash=="#myHash"){
      $("#check1").prop("checked", !$("#check1").prop("checked"));
    }
});

Вот также мой html, если это полезно.

<div class="filter--container">
    <div id="filters">
      <div class="filterblock">
        <input id="check1" type="checkbox" name="check" value="filter1" class="category">
        <label class="checkbox-label" for="check1">Filter 1</label>
      </div>

      <div class="filterblock">
        <input id="check2" type="checkbox" name="check" value="filter2" class="category">
        <label class="checkbox-label" for="check2">Filter 2</label>
      </div>
    </div>
</div>

<div class="resultblock" data-tag="filter1">
  MyContent
</div>
<div class="resultblock" data-tag="filter2">
  MyContent
</div>

Ссылка на предыдущую страницу ...

<a href="www.domain.com/#myHash" id="select-checkbox1">link</a>

Я бы хотел, чтобы, щелкнув по ссылке, вы попадете на страницу со списком продуктов, и содержимое автоматически отобразится.фильтруется и флажок выбирается.Однако теперь он устанавливает флажок, но не выполняет функцию фильтра.

Любая помощь будет принята с благодарностью.Спасибо !!

Answer 1

Просто добавьте $('.category').trigger('change'); после $("#check1").prop("checked", !$("#check1").prop("checked"));.

Answer 2

Изменение свойства флажка checked не вызовет событие onChange.Что вам нужно сделать, это создать функцию, которая будет вызываться выше 2 событиями.

$('.category').on('change', function() {
  filtering($(this));
});

function filtering(checkbox) {
  var category_list = [];
  $('#filters :input:checked').each(function() {
    var category = checkbox.val();
    category_list.push(category); //Push each check item's value into an array
  });

  if (category_list.length == 0) {
    $('.resultblock').fadeIn();
  } else {
    $('.resultblock').each(function() {
      var item = $(this).attr('data-tag');
      if (jQuery.inArray(item, category_list) > -1) { //Check if data-tag's value is in array
        $(this).fadeIn('slow');
      } else {
        $(this).fadeOut('fast');
      }
    });
  }
}

$(document).ready(function() {
  var hash = location.hash;
  if (hash == "#myHash") {
    $("#check1").prop("checked", !$("#check1").prop("checked"));
    filtering($("#check1"));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>