Question

我想创建一个页面，我可以在其中过滤带有复选框的产品，还可以在重新加载页面时保留过滤器选择。

<div class="checkbox checkbox-success checkbox-inline ">
<input type="checkbox" id="1" value="option1" >
<label for="1">Adidas</label>
</div>
<div class="checkbox checkbox-success checkbox-inline ">
<input type="checkbox" id="2" value="option2" >
<label for="1">Nike</label>
</div>

<script>
    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    $checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });

  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

$('input[type="checkbox"]').change(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.products >div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
        });
    } else {
        $('.products >div').show();

    }
});
</script>

我已经找到了两个jquery脚本，它们都可以正常工作。我的意思是，我可以在选中/取消选中复选框时过滤产品。选中复选框并重新加载页面时，该复选框已正确选中，但尚未过滤产品。因此，我需要合并这两个脚本，以便在重新加载带有选中复选框的页面时也能对产品进行过滤。

希望有人可以在这里指导我。

---更新---

我在这里创建了一个示例：maxie.dk/filter.php

1）选中一个复选框

2）产品过滤器已激活，仅显示具有匹配值的产品

3）刷新页面

4）选中的复选框保持应有的状态，但现在所有产品再次可见。仅与选中复选框匹配的产品应该可见。

谢谢

Answer 1

如果我解决了您的问题-您想将每次输入更改时发生的“业务逻辑”移至单独的功能，以便在重新加载页面时也可以执行。

...
// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

// your business logic
function updateProducts() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.products >div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
        });
    } else {
        $('.products >div').show();

    }
}

$('input[type="checkbox"]').change(function() {
    // execute for each change
    updateProducts();
});

// execute on page load
updateProducts()

Answer 2

我已对此进行了重新编写，以便它可以更新本地存储并检查并显示保存在本地存储中的产品。它还将删除或显示选中的产品。看看。

<div class="col-xs-12 col-sm-12">
  <div class="breadcrumb" id="checkbox-container">
    <h4 class="visible-xs"></h4>
    <span class="hidden-xs"></span>

    <div class="checkbox checkbox-success checkbox-inline ">
      <input type="checkbox" id="1" value="1" />
      <label for="1">Adidas</label>
    </div>
    <div class="checkbox checkbox-success checkbox-inline ">
      <input type="checkbox" id="2" value="2" />
      <label for="2">Reebok</label>
    </div>
    <div class="checkbox checkbox-success checkbox-inline ">
      <input type="checkbox" id="3" value="3" /> <label for="3">Nike</label>
    </div>

    ´
  </div>
</div>

<div class="products">
  <div
    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "
    data-category="1" >
    PRODUCT 1
  </div>
</div>
<div class="products">
  <div
    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "
    data-category="1">
    PRODUCT 2
  </div>
</div>
<div class="products">
  <div
    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "
    data-category="2"
  >
    PRODUCT 3
  </div>
</div>
<div class="products">
  <div
    class="col-xs-6 col-ms-4 col-sm-4 col-md-4 col-lg-3 padding-btm "
    data-category="3"
  >
    PRODUCT 4
  </div>
</div>


var checkedValues =JSON.parse(localStorage.getItem('checkboxValues')) || [],
      $checkboxes = $("#checkbox-container input[type=checkbox]");

        function loadPrevious(){
           if(checkedValues.length>0){
            $("div.products > div").hide();
                $.each(checkedValues,function(i,v){
                     $("#checkbox-container input[type=checkbox]#" + v ).prop('checked',true);
                     $('.products >div[data-category=' + v + ']').show();
                })
           }

      }

    loadPrevious();

    $checkboxes.change(function(e) {
      e.preventDefault();
      if($(this).prop("checked") == true){
           checkedValues.push($(this).attr("id"));
            loadPrevious();
           localStorage.setItem("checkboxValues", JSON.stringify(checkedValues));               
      }else{
           var checkId = $(this).attr("id"),
           arr = JSON.parse(localStorage.getItem('checkboxValues'));
           $('.products >div[data-category=' + checkId + ']').hide();
           var newArr = $(arr).not([checkId]).get();
            localStorage.setItem("checkboxValues", JSON.stringify(newArr));               
      }
    });

请参阅演示here

带有jquery的复选框过滤产品，并通过重新加载保持状态

2 个答案: