0

我对 flexslider 2 有疑问，请提升缩放加。我想从滑块缩放活动图像。我必须使用这个选项，因为我也在 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有类表示图像处于活动状态时，我想将类添加到必须缩放的图像中。不幸的是，它为滑块中的所有图像添加了缩放类，而不检查它是否li处于活动状态。我究竟做错了什么？

4

2 回答 2

0

不需要为此添加不同的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
       }
   });
});
于 2019-11-26T13:41:32.250 回答
0

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

它还必须在每次slide > li更改类时运行。

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

因此，您可以添加 kozachenko 的函数，然后使用它来查看类是否li已更改，然后添加/删除您的zooming类。

要仅查找您要查找的那个，您可以使用活动类作为选择器，然后使用 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
  });

});
于 2019-11-26T14:34:40.127 回答