当我第一次隐藏元素时，如果语句永远不会返回 true

Question

$('.checkbox').on('change', function() {
  $('.pagination').hide();
  $('.callout').hide();

  $('.checkbox').each(function() {
    if ($(this).prop('checked') === true) {
    var checkboxName = $(this).val();

      $('.callout').each(function() {
        var calloutArray = $(this).data();
        var i;
          for (i = 0; i < calloutArray.category.length; i++) {
            $(this).hide();

            if (checkboxName === calloutArray.category[i]) {
               $(this).show();
            }
          }

      });
    }
   });
 });

为了解释这个功能，它基本上会监听是否已单击复选框，然后隐藏页面上的所有标注。

然后它会遍历每个复选框并检查页面上哪些是正确的。然后我创建一个存储当前复选框值的变量。

在此之后，我想遍历每个标注并从数据属性中提取其数据。

然后我循环遍历数组中的每个字符串并无论如何隐藏标注。但是，如果标注的数组值与复选框值相同，那么我需要显示它。

这似乎在没有隐藏的情况下工作。但是，如果标注不包含相同的已检查类别名称，我需要隐藏标注，这是我遇到问题的地方。

如果我已经隐藏了标注，If 语句似乎永远不会返回 true。所以问题是如果选定的复选框与标注数组字符串之一匹配，我如何显示标注，但如果字符串不在标注数组中，则隐藏标注。

Answer 1

据我了解，下面的代码是等价的

$('.checkbox').on('change', function () {
    $('.pagination, .callout').hide();

    $('.checkbox:checked').each(function () {
        var checkboxName = $(this).val();

        $('.callout').hide().each(function () {
            var calloutArray = $(this).data();

            if (calloutArray.category.indexOf(checkboxName) !== -1) {
                $(this).show();
            }
        });
    });
});

1. 合并具有共同操作的选择器(hide())
2. 使用:checked 伪选择器仅选择选中的元素
3. 在选择器上使用hide()，然后使用each()对其进行迭代
4. 使用indexOf检查元素是否在数组中

Answer 2

您在循环的每次迭代上显示/隐藏您的元素。这意味着 last 迭代的结果获胜，就好像您根本没有完成之前的迭代一样。

您可以只使用Array#indexOf 来查看名称是否在数组中，并使用生成的标志来显示/隐藏标注：

$(this).toggle(calloutArray.category.indexOf(checkboxName) != -1);

例如：

$('.checkbox').on('change', function() {
    $('.pagination').hide();
    $('.callout').hide();

    $('.checkbox').each(function() {
        if ($(this).prop('checked') === true) {
            var checkboxName = $(this).val();

            $('.callout').each(function() {
                var calloutArray = $(this).data();
                $(this).toggle(calloutArray.category.indexOf(checkboxName) != -1);
            });
        }
    });
});

还要注意

if ($(this).prop('checked') === true) {

写的路很长

if (this.checked) {

同样，inputelements，this.value 与 $(this).val() 相同。