使用 jQuery 计算活动过滤器并将其插入到属性中答案

【问题标题】：Calculate active filters and insert it in an attribute with jQuery使用 jQuery 计算活动过滤器并将其插入到属性中
【发布时间】：2020-11-28 07:36:17
【问题描述】：

我在 Wordpress 上使用 FacetWP 和这个 jQuery sn-p 来指示构面是否处于活动状态：

(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 sn-p 以计算有多少是活动的，并将该数字插入到每个方面的标题 H3 的“活动检查”属性中？

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

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

&lt;h3 class="facet-label" active-checked="2"&gt;Color&lt;/h3&gt;

【问题讨论】：

标签： jquery facetwp

【解决方案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);

很简单。

【讨论】：