jquery - 使用 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 的“活动检查”属性中？

这样我就可以像这样显示它：

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

简单地。