Блог

Я пытаюсь выполнить 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);
  }
})
  

Проблема в том, что 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/