检查 div 是否有类然后动画

Question

我正在尝试执行用户操作animate后的操作owl carousel drag。问题是$(this)没有认识到.nav-item有.active阶级的东西。有什么想法我做错了什么以及如何解决它吗？owl.on('changed.owl.carousel', function(event) {  if ($(".nav-item").hasClass("active")) {    var navPosition = $('.navbar-collapse').scrollLeft()    elemPosition = $(this).offset().left;    $(".navbar-collapse").animate({scrollLeft: navPosition + elemPosition}, 800);  }})

Answer 1

问题是它hasClass没有选择一个元素，但它只是返回 true 或 false。要执行您需要执行的操作，请尝试使用该each函数来选择您想要与之交互的元素并将其this正确分配给：

owl.on('changed.owl.carousel', function(event) {

  $(".nav-item").each(function(){

    if ($(this).hasClass("active")){

      var navPosition = $('.navbar-collapse').scrollLeft();

      elemPosition = $(this).offset().left;

      $(".navbar-collapse").animate({scrollLeft: navPosition + elemPosition}, 800);

    }

  }

});

您还可以执行类似的操作，以便使用一个选择器字符串选择具有活动类的元素：

owl.on('changed.owl.carousel', function(event) {

  $(".nav-item.active").each(function(){

    var navPosition = $('.navbar-collapse').scrollLeft();

    elemPosition = $(this).offset().left;

    $(".navbar-collapse").animate({scrollLeft: navPosition + elemPosition}, 800);

  }

});

https://api.jquery.com/each/