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();
            }
          }

      });
    }
   });
 });

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

然后循环遍历每个复选框，并检查页面上哪些是真的。然后我创建一个存储当前复选框值的变量。

之后我想循环遍历每个callout并从data属性中提取数据。

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

这似乎没有隐藏。但是我需要隐藏标注，如果它们没有保持相同的检查类别名称，这是我遇到问题的地方。

如果我已经隐藏了标注，那么If语句似乎永远不会返回true。所以问题是如果选中的复选框与其中一个callout数组字符串匹配，如何显示callout，但如果字符串不在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();
            }
        });
    });
});

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

Answer 2

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

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

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

E.g：

$('.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()相同。

当我第一次隐藏元素

2 个答案: