Question

我只想将“fadeInLeft”类添加到下一个旋转木马项目的标题（h1标签），而不是其项目的兄弟姐妹中的其他h1标签，如果存在则可以删除该类以便能够看到fadeInLeft效果滑动时。

所以这是我的jQuery函数：

function onChange() {
var el = $('.owl-carousel h1');
if ((el).is('.animated.fadeInLeft')) {
    el.removeClass('fadeInLeft')
        .addClass('fadeInLeft');
} else {
    el.addClass('fadeInLeft');
  }
}

$('.owl-carousel').owlCarousel({
   onChange: onChange,
   items: 1,
   loop: true,
   nav: true,
   pagination: true
});

这就是内容：

<div class="owl-carousel owl-theme">
<div class="item item1">
    <div class="inner">
        <h1 class="animated fadeInLeft">Some Text</h1>
    </div>
</div>
<div class="item item2">
    <div class="inner">
        <h1 class="animated">Some Text</h1>
    </div>
</div>
<div class="item item3">
    <div class="inner">
        <h1 class="animated">Some Text</h1>
    </div>
</div>

我使用animate.css和owl-carousel插件。

请帮助我，并提前致谢.. :)

Answer 1

使用

var el = $('h1');

而不是

{{1}}

Answer 2

尝试：

 var el = $('.yourclass h1').first();

或：

var el = $('.yourclass h1').next(); if you really meant the next one

Answer 3

使用this.currentItem查找当前项目并使用next()查找下一项，然后找到h1并执行您的成功代码......

$('.owl-carousel').owlCarousel({
   onChange: function (elem) {
              var current = this.currentItem;
              var el = elem.find(".owl-carousel").eq(current).next().find('h1');
              if ((el).is('.animated.fadeInLeft')) {
                    el.removeClass('fadeInLeft')
                        .addClass('fadeInLeft');
                } else {
                    el.addClass('fadeInLeft');
                  }
                }
            },
   items: 1,
   loop: true,
   nav: true,
   pagination: true
});

Answer 4

这解决了我的问题

var slider = $('.owl-carousel').owlCarousel({
  items: 1,
  loop: true,
  nav: true,
  pagination: true
});

slider.on('changed.owl.carousel', function(property) {
  var current = property.item.index;
  var el = $(property.target).find(".owl-item").eq(current).find("h1");

  var elPrev = $(property.target).find(".owl-item").eq(current).prev().find("h1");
  var elNext = $(property.target).find(".owl-item").eq(current).next().find("h1");

  elPrev.removeClass('fadeIn');
  elNext.removeClass('fadeIn');

  if (!(el).is('.fadeIn')) {
      el.addClass('fadeIn');
    }
  });

我应该阅读更多documentation。无论如何，谢谢你的帮助！你给了我一些想法。：）

jQuery onChange函数影响所有滑块

4 个答案:

这解决了我的问题