0

我有一个可以通过复选框排序的列表。我写了一个小脚本，应该存储检查值，以便刷新过滤列表显示相同的项目，就像他们在离开页面之前所做的那样。

目前，当我刷新时，它会检查我所有的复选框，而不仅仅是我选中的复选框。

这是我的输入的设置方式：

<input type="checkbox" name="filters" ng-click="includeBrand('Brand A')" />Brand A

这是我的功能，应该检查相同的功能：

$(function () {
    var data = localStorage.getItem("filter-by");

    if (data !== null) {
        $("input[name='filters']").attr("checked", "checked");
    }


});



$("input[name='filters']").click(function () {

    if ($(this).is(":checked")) {
        localStorage.setItem("filter-by", $(this).val());
    } else {
        localStorage.removeItem("filters");
    }

});

让它检查“以上所有内容”可能会出现什么问题？

谢谢您的帮助！

4

1 回答 1

0

更新的回复

您的代码笔中发生了几件事。这是我的建议：

首先，添加一个 data- 属性，如下所示：

<input type="checkbox" name="filters" data-filter-by="Brand A" ng-click="includeBrand('Brand A')" />Brand A

更新您的点击处理程序，使其更像这样：

$("input[name='filters']").click(function () {
  var items = localStorage.getItem("filter-by");
  items = items ? JSON.parse(items) : [];

 var data = $(this).data('filter-by');
 var index = items.indexOf(data);

  if ($(this).is(":checked")) {
    items.push(data);
  } else if (index >= 0) {
    items.splice(index, 1);
  }

  localStorage.setItem("filter-by", JSON.stringify(items));
});

最后，更新您预先选择复选框的代码，使其更像这样：

$(function () {
  var items = localStorage.getItem("filter-by");
  items = items ? JSON.parse(items) : [];

  $("input[name='filters']").each(function(index, input) {
    var data = $(input).data('filter-by');
    if (items.indexOf(data) >= 0) {
      $(input).attr('checked', 'checked');
    }
  });
});

这有意义吗？

原始回复

这条线...

$("input[name='filters']").attr("checked", "checked");

检查所有名为“过滤器”的输入 - 而不仅仅是单个输入。我怀疑您的意思是遍历您的过滤器复选框，并仅选择val()值与存储在本地存储中的项目匹配的那些。所以像这样的事情......

$("input[name='filters']").each(function(index, input) {
  if ($(input).val() === data) {
    $(input).attr('checked', 'checked');
  }
});

我还应该指出，您filter-by在一个地方写信并在下面的 2 行中删除filters。那些应该是同一个键。

于 2015-03-20T17:42:07.610 回答