如何监听jQuery OwlCarousel v1.3.3的owl-next添加disabled类时跳转页面？

针对你的需求，有两种可靠的实现方式，优先推荐使用组件原生回调，其次是DOM类变化监听：

方案一：利用OwlCarousel v1.3.3原生回调（最优） #

OwlCarousel v1.3.3自带afterMove回调，滑动完成后会触发，直接在回调里判断是否到达最后一项即可，无需监听DOM类变化，更稳定：

$('.owl-carousel').owlCarousel({
  // 你的轮播配置，示例参数：
  items: 1,
  loop: false, // 必须关闭循环，否则最后一项后会回到第一项，不会出现disabled类
  nav: true,
  // 滑动完成后的回调
  afterMove: function() {
    // 获取总项数和当前激活项的索引（currentItem从0开始计数）
    const totalItems = this.owl.owlItems.length;
    const currentIndex = this.owl.currentItem + 1;

    // 判断是否到达最后一项
    if (currentIndex === totalItems) {
      // 跳转到博客列表页
      window.location.href = 'www.example.com/blog';
    }
  }
});

方案二：监听.owl-next的disabled类变化（备选） #

如果因为特殊场景必须通过监听类变化实现，可以使用MutationObserver监听DOM元素的类属性变化：

// 等待轮播初始化完成后获取按钮元素
$(document).ready(function() {
  const nextBtn = document.querySelector('.owl-next');
  
  // 创建MutationObserver实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      // 只监听class属性的变化
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        // 检查是否添加了disabled类
        if (nextBtn.classList.contains('disabled')) {
          window.location.href = 'www.example.com/blog';
        }
      }
    });
  });

  // 配置观察选项：仅监听class属性
  const config = { attributes: true, attributeFilter: ['class'] };
  
  // 启动观察
  observer.observe(nextBtn, config);
});

注意事项 #

• 方案一中必须将loop设为false，否则轮播会循环滚动，永远不会触发最后一项的判断。
• 方案二中要确保在轮播初始化完成后再启动MutationObserver，否则可能找不到.owl-next元素。
• 优先选择方案一，原生回调是组件设计时提供的交互钩子，比DOM监听更适配组件的生命周期，减少潜在问题。

内容的提问来源于stack exchange，提问作者Learning