语句在第一次隐藏元素时永远不会返回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。因此，问题是，如果选中的复选框与callout数组字符串中的一个匹配，但如果该字符串不在callout数组中，则如何显示标注。

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

在循环的每一次迭代中都会显示/隐藏元素。这意味着上一次迭代的结果获胜，就好像您根本没有做过前面的迭代一样。

您只需使用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) {

类似地，对于input元素，this.value与$(this).val()相同。