计算活动过滤器并将其插入具有 jQuery 的属性中

Question

我在 Wordpress 上使用 FacetWP 和这个 jQuery 片段来指示某个方面是否处于活动状态：

(function($) {
  $(document).on('facetwp-loaded', function() {
    $.each(FWP.facets, function(name, vals) {
      if (FWP.facets[name].length > 0) {
        $('.facetwp-facet-' + name).parent().addClass('is-active');
      }
      else {
        $('.facetwp-facet-' + name).parent().removeClass('is-active');
      }
    });
  });
})(jQuery);

CSS:

.facet-wrap.is-active h3.facet-label::after {
    content: "Active";
}

HTML 看起来像这样：

<div class="facet-wrap is-active">
    <h3 class="facet-label">Color</h3>
    <div class="facetwp-facet facetwp-facet-color facetwp-type-checkboxes">
        <div class="facetwp-checkbox checked" data-value="green">Green</div>
        <div class="facetwp-checkbox checked" data-value="black">Black</div>
        <div class="facetwp-checkbox" data-value="yellow">Yellow</div>
        <div class="facetwp-checkbox" data-value="orange">Orange</div>
    </div>
</div>

如何改进此 jQuery 片段以计算有多少活跃并将该数字插入每个方面标题 H3 的“active-checked”属性中？

这样我就可以这样显示了：

h3.facet-label::after {
  content: attr(active-checked);
  margin-left: 8px;
  color: red;
}

<h3 class="facet-label" active-checked="2">Color</h3>

Answer 1

这个问题没有得到解答，分享一下我的收获：

(function($) {
    document.addEventListener('facetwp-loaded', function() {
        $.each(FWP.facets, function(name, val) {
            var length = $('.facetwp-facet-' + name).children('.checked').length;
            if (length > 0) {
                $('.facet-wrap .facetwp-facet-' + name).parent().attr('active-checked', length);
            } else {
                $('.facet-wrap .facetwp-facet-' + name).parent().removeAttr('active-checked');
            }
        });
    });
})(jQuery);

简单。

计算活动过滤器并将其插入具有 jQuery 的属性中

Calculate active filters and insert it in an attribute with jQuery

jquery

facetwp