jQuery中如何保证指定滑块按钮的active类永远不被移除？

实现方案 #

你使用的是Owl Carousel滑块组件，它的内置逻辑会在每次切换滑块时统一清空所有指示器按钮的active类，再给当前对应滑块的按钮加类，要保留指定按钮的active状态可以用以下三种方案：

方案1：监听滑块切换事件，强制补回active类（推荐，无需改源码）

每次滑块切换完成、组件更新完指示器状态后，立刻给你的指定按钮重新加active类，覆盖组件的默认操作：

// 绑定Owl Carousel切换完成事件，选择器替换成你自己的滑块容器选择器
$('.img-block .owl-carousel').on('changed.owl.carousel', function() {
  // 这里替换成你的指定按钮的专属类选择器即可
  $('.owl-dots button.你的专属类名').addClass('active');
});

你现有的主动加active的代码可以保留，和上面的监听逻辑搭配使用即可，你当前的添加代码调整下写法更稳妥：

$($(item).closest('.img-block').find('.owl-dots button').not('.displayed-slider-btn')[2]).addClass('active');

方案2：修改组件内置逻辑，跳过指定按钮的active清除操作

如果不想重复加类，可以修改Owl Carousel源码里的updateDots方法，找到里面清空所有按钮active类的代码：

this.$dots.find('button').removeClass('active');

修改为排除你的专属类即可：

this.$dots.find('button').not('.你的专属类名').removeClass('active');

方案3：CSS兜底（可选，搭配JS使用避免闪烁）

如果担心JS执行有延迟导致按钮瞬间失去active样式，可以直接写高优先级CSS强制你的指定按钮永远展示active样式：

/* 替换成你自己的专属类名，里面的样式复制你当前.owl-dots button.active的样式即可 */
.owl-dots button.你的专属类名 {
  opacity: 1 !important;
  background-color: #你的active背景色 !important;
  /* 其余active对应的样式都加在这里 */
}

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