缩放 class 添加到滑块中的所有图像，而不检查 'li' 是否处于活动状态

Question

我对 flexslider 2 和 elevate zoom plus 有疑问。我想从滑块缩放活动图像。我必须使用这个选项，因为我也在 wordpress 中使用 ACF，而且只有这个可以按我的意愿工作。不幸的是，我创建的代码无法正常工作

$(document).ready(function() {
    if ($('.flexslider .slides > li').hasClass('flex-active-slide')) {
    $('.flexslider .slides li img').addClass('zooming');
}
else
{
    $('.flexslider .slides li img').removeClass('zooming');
}
});
</script>

当 li 有 class 时，这意味着图像处于活动状态，然后我想将 class 添加到必须缩放的图像。不幸的是，它在不检查 li 是否处于活动状态的情况下将缩放 class 添加到滑块中的所有图像。我做错了什么？

Answer 1

不需要为此添加不同的js，您可以像下面这样只在初始化中添加：

$(window).load(function () {
    $('.flexslider').flexslider({
       animation: "slide",
       start: function (slider) {
          $('body').removeClass('loading');
          $(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class on slider start
       },
       before: function (slider) {
          $(slider).find(".zooming").each(function () {
              $(this).removeClass("zooming"); // this will remove class from previous tag
          });
       },
       after: function (slider) {
          $(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class in next tag
       }
   });
});

Answer 2

您的逻辑很接近，但您要使用此行定位所有图像： $('.flexslider .slides li img').addClass('zooming');

每次 slide > li 的 class 更改时，它也必须运行。

不幸的是 jQuery 没有像 .classChange() 这样的好东西，但是 here 是一个函数 - 由 kozachenko 在 github 上创建 - 它可以满足我们的需求。

所以你可以添加kozachenko的函数然后用它来查看li的class是否改变了，然后add/remove你的zoomingclass.

要仅找到您要查找的那个，您可以使用活动的 class 作为选择器，然后使用 jQuery.find() 查找该特定元素内的图像.

$(document).ready(function(){
  //kozachenko's function https://gist.github.com/kozachenko/30e55fb5f9ae170eedfe258430fd09ec
  (function(){//adds a trigger step to the addClass/removeClass jQuery functions
    var originalAddClassMethod = jQuery.fn.addClass;
    var originalRemoveClassMethod = jQuery.fn.removeClass;
    jQuery.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('classChanged');
        return result;
    }
    jQuery.fn.removeClass = function(){
        var result = originalRemoveClassMethod.apply( this, arguments );
        jQuery(this).trigger('classChanged');
        return result;
    }
  })();

  $('.flexslider .slides > li').on('classChanged', function(){//the new event triggered by addClass()/removeClass()
    $(this).find('img').removeClass('zooming');//first remove the class from any other image
    $('.flex-active-slide').find('img').addClass('zooming'); //add the class to active image
  });

});

缩放 class 添加到滑块中的所有图像，而不检查 'li' 是否处于活动状态

Zooming class added to all images in slider without checking if the 'li' is active

javascript

wordpress

jquery

flexslider

elevatezoom