Divi

Question

我有一个幻灯片导航脚本，允许我使用触发点击事件的“nth-child(#)”导航到特定幻灯片。

每个按钮目前都有自己的幻灯片参考，即 Slide-1 按钮将 link 到第 nth-child(1) 等等直到 slide/button 8

我正在寻找使用循环或类似方法优化以下脚本的方法，以便它更易于管理并仍然保持相同的功能。

<script>
  
jQuery(document).ready(function( $ ) {
  
var selector = '.activelinks a';
$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});
  
$("#Slide-1").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(1)").trigger("click");
});
    
$("#Slide-2").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(2)").trigger("click");
});
    
$("#Slide-3").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(3)").trigger("click");
});
    
$("#Slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});
  
$("#Slide-5").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(5)").trigger("click");
});
    
$("#Slide-6").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(6)").trigger("click");
});
    
$("#Slide-7").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(7)").trigger("click");
});
    
$("#Slide-8").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(8)").trigger("click");
});
});
</script>

Answer 1

您可以为所有滑动按钮提供 class，例如：slideBtn

然后 :

jQuery(document).ready(function ($) {
                var selector = ".activelinks a";
                $(selector).on("click", function () {
                    $(selector).removeClass("active");
                    $(this).addClass("active");
                });

                $(".slideBtn").on("click", function (e) {
                    e.preventDefault();
                    var slideNumber = e.target.id.replace( /^\D+/g, '');
                    $(".et-pb-controllers a:nth-child("+slideNumber+")").trigger("click");
                });
            });

Divi - 滑动导航按钮优化

Divi - Slide Navigation On Button Optimisation

javascript

wordpress

jquery