jquery - 从滑块读取属性值，更改按钮类

Question

所以我正在使用“Divi 主题”构建一个 WordPress 网站，到目前为止一切都很好，但是在使用“滑块模块”时我遇到了障碍。

设想：

我使用滑块模块构建了一个滑块，然后，我在滑块上方放置了一些按钮，并添加了一个小脚本，以便按钮可以控制滑块，如下所示：

按钮 1 打开幻灯片图像 1

按钮 2 打开幻灯片图像 2

等等等等..你明白了，这是代码：

<script>
jQuery(document).ready(function( $ ) {
  
var selector = '.btn-slide a';
$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

//SELECTOR - BUTTON 1 TO SLIDE 1  
$("#btn-slide-1").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(1)").trigger("click");
});

//SELECTOR - BUTTON 2 TO SLIDE 2 
$("#btn-slide-2").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(2)").trigger("click");
});

//SELECTOR - BUTTON 3 TO SLIDE 3
$("#btn-slide-3").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(3)").trigger("click");
});
 
//SELECTOR - BUTTON 4 TO SLIDE 4 
$("#btn-slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
}); 

//SELECTOR - BUTTON 5 TO SLIDE 5 
$("#btn-slide-5").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(5)").trigger("click");
}); 
  
//SELECTOR - BUTTON 6 TO SLIDE 6 
$("#btn-slide-6").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(6)").trigger("click");
  
});
});
</script>

单击按钮时，它会添加一些 CSS 样式以了解哪个幻灯片处于活动状态，因此如果单击按钮 1，则从所有其他按钮中删除一个类，在单击的按钮上切换一个类，因此按钮颜色会发生变化，因此您可以告诉点击的按钮属于特定的幻灯片，代码在这里：

<style type="text/css">
.button-slider01-slide6.opened{
border-bottom: 2px !important;
border-bottom-style: solid !important;
border-bottom-color:#00a8ff !important;
}  
</style>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.button-slider01-slide6').click(function(e){
jQuery('.button-slider01-slide6').toggleClass('opened closed'); 
 
//TOGGLE OTHER SLIDER BUTTON CLASS  
jQuery('.button-slider01-slide1').removeClass('opened'); 
jQuery('.button-slider01-slide2').removeClass('opened'); 
jQuery('.button-slider01-slide3').removeClass('opened'); jQuery('.button-slider01-slide4').removeClass('opened'); jQuery('.button-slider01-slide5').removeClass('opened'); 

});
});
</script>

问题是滑块有自己的导航按钮，它有左右箭头导航，在底部，它有可以点击的小圆圈，我可以禁用滑块导航按钮并强制用户使用我创建的按钮来导航滑块，但如果用户更喜欢滑块导航按钮或带标签的按钮来浏览幻灯片，我想进行 A/B 测试。

如何定位保存活动幻灯片的属性，因此如果单击滑块按钮，它会切换我创建的按钮的类以导航滑块，以便将样式应用于属于活动幻灯片的按钮以显示哪个幻灯片处于活动状态？

显示活动幻灯片的属性是：

data-active-slide="et_pb_slide_X"

其中“X”是活动幻灯片的编号

我试过这个无济于事：

<script type="text/javascript">
jQuery(document).ready(function() {

var ActiveSlide = ('#Slider-01').last().attr('data-active-slide');
    if(ActiveSlide == 'et_pb_slide_1'){
jQuery('.button-slider01-slide2').toggleClass('opened closed');  
   
//CHANGE OTHER SLIDER BUTTON CLASS  
jQuery('.button-slider01-slide1').removeClass('opened'); 
jQuery('.button-slider01-slide3').removeClass('opened');
jQuery('.button-slider01-slide4').removeClass('opened'); 
jQuery('.button-slider01-slide5').removeClass('opened'); 
jQuery('.button-slider01-slide6').removeClass('opened'); 
}



});

</script>

任何指导将不胜感激。

标签： jquerydividivi-theme