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

更改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>

Answer 2

只需在$('.category').trigger('change');之后添加$("#check1").prop("checked", !$("#check1").prop("checked"));。

如何基于url哈希值预先选择一个复选框并执行功能

2 个答案: