基于按钮优化的滑轨导航

Question

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

每个按钮目前都有自己的幻灯片引用，即幻灯片-1按钮将链接到nth-child(1)等，直至幻灯片/按钮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

您可以为所有幻灯片按钮提供一个类，如: 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");
                });
            });