使用jQuery禁用过滤列表中的空白类别

如何解决使用jQuery禁用过滤列表中的空白类别

我对Javascript / jQuery很陌生。我有一份UL结构化的项目列表（在这种情况下，是课程提供）。每个“课程”都是一个LI元素。使用jQuery按类别对列表进行过滤，jQuery在检查每个列表项的“数据类别”属性是否与所选类别（用户选中的复选框）匹配后，控制可见性。

一切正常。

我还有一个要求，即用户在选择过滤器/类别的组合时不应看到“ 0个结果”。因此，我必须检查每个类别是否不会返回空集。如果可以，我希望禁用该类别。

首先，我遵循以下示例：jQuery Isotope filtering: add a class when there are no items in a data-category in the grid

这是我想出的代码：

        // whenever a category is selected,check all categories to see which ones
        // would be empty if selected.
        // To do this,we iterate over all categories,then over all visible items,and check if their data-category contains
        // the category that matches the current category. If 0 items match,disable that category.
        function DisableEmptyCategories() {
            $allCategories = $(".checkboxlist input[type='checkbox']");
            $allCategories.each(function (i,element) {
                var $checkbox = $(element);
                // check if checkbox's value is in any displayed item's data-category tag.
                var val = $checkbox.val();
                if (val !== undefined) {
                    if ($filteredResults.find('[data-category~="' + val + '"]').length == 0) {
                        // if equals 0,disable. 
                        $checkbox.addClass('disabled').attr('disabled','disabled');
                    }
                    else {
                        // else,make sure it's enabled.
                        $checkbox.removeClass('disabled').attr('disabled','false');
                    }
                }
            });
        }

不幸的是，最终结果是它每次都会禁用我的所有类别，而且我不知道为什么。我检查了$ filteredResults列表和val变量是否正确填充。但是，似乎我的.find（）无法正常工作，并且始终返回0。

以下是说明问题的小提琴：https://jsfiddle.net/yvgx81k4/ 在此示例中，除了“ In-Class”外，存在与所有类别匹配的项目，因此仅应禁用“ In-Class”类别，而所有这些类别均被禁用。

我在做什么错了？

解决方法

您未选择正确的li的原因是因为您怀疑find中使用的选择器。

在您的代码中，您正在执行以下操作：

if ($('#courselist > li').find('[data-category~="' + val + '"]').length == 0) {

这是选择所有li，然后寻找具有匹配数据类别的其子代...但是数据类别是{{1 }}，不是孩子。

相反，您可以选择li，然后查找其子类具有正确的数据类别，即

courselist

根据您的小提琴，这里是一个有效的代码段： （我还使用了 if ($('#courselist').find('[data-category~="' + val + '"]').length == 0) { ，如HereticMonkey所建议的，但这不是您的选择器失败的原因）

prop

$('.checkboxlist input[type="checkbox"]').on('change',function() {

$allCategories = $(".checkboxlist input[type='checkbox']");
  $allCategories.each(function(i,element) {
    var $checkbox = $(element);
    // check if checkbox's value is in any displayed item's data-category tag.
    var val = $checkbox.val();
    if (val !== undefined) {
      console.log(val);
      if ($('#courselist').find('[data-category~="' + val + '"]').length == 0) {
        // if equals 0,disable.
        $checkbox.addClass('disabled').prop('disabled',true);
      } else {
        // else,make sure it's enabled.
        $checkbox.removeClass('disabled').prop('disabled',false);
      }
    }
  });

});

body {
  padding: 20px;
  font-family: Helvetica;
}

#menu,#content {
  float: left;
}

/* disabled checkbox */

.checkboxlist input[type='checkbox'].disabled+label {
  color: red;
}