WooCommerce：FlexSlider将活动类添加到<li>而不是<img>元素

Question

我想将类.flex-active从<img>标记移到父<li>。

为此，我找到了以下JS代码：

//-- Add flexslider active class to li of nav control instead of just on the image
    if($('.woocommerce-product-gallery ol.flex-control-nav').length > 0) {
      // initial check and addition
      $('.woocommerce-product-gallery ol.flex-control-nav li').each(function() {
        if($(this).children('img').hasClass('flex-active')) {
          $(this).addClass('flex-active');
        } else {
          $(this).removeClass('flex-active');
        }
      });
      // bind into flexslider callback and run dynamically
      $('.woocommerce-product-gallery').bind('after', function(event, slider) {
        $('.woocommerce-product-gallery ol.flex-control-nav li').each(function() {
          if($(this).children('img').hasClass('flex-active')) {
            $(this).addClass('flex-active');
          } else {
            $(this).removeClass('flex-active');
          }
        });
      });
    }

在页面加载时效果很好，但是如果我在图像中滑动，父类将不会更新，只有第一个<li>具有类.flex-active。

有什么我想念的吗？