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

Posted 2023-05-09

【中文标题】当我第一次隐藏元素时，如果语句永远不会返回 true

【英文标题】：If statement never returning true when I first hide the element

【发布时间】：2016-11-26 07:05:43

【问题描述】：

$('.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。所以问题是如果选定的复选框与标注数组字符串之一匹配，我如何显示标注，但如果字符串不在标注数组中，则隐藏标注。

【参考方案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();
            
        );
    );
);

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

【讨论】：

正如我之前多次指出的，解释至少和代码一样重要。不要在没有任何解释的情况下竞相发布代码以成为“排在第一位”的人，而是在您的初始答案中解释。您不知道 SO 不会关闭，您的互联网连接可能会失败，等等。

非常感谢您的解释。我现在知道我哪里出错了。谢谢

【参考方案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() 相同。

【讨论】：

$('.checkbox').each(function() if ($(this).prop('checked') === true) ==> $('.checkbox:checked').each(function()

@Tushar：如果你想强制 jQuery 绕过浏览器的内置选择器引擎，可以。