jquery - 如何为多个元素设置脚本

Question

我使用了 fullpage.js 并在 3 个部分中实现了 slickSlider.js 并编写了一个脚本来与它的类进行交互。

我将代码复制到一个新的部分。现在我想保持代码小，所以为每个 Slick 编写单独的 css 和脚本是不好的。

CSS 我可以组合并添加新名称，例如。 .div1、.div2、div3{}

但我将不得不重写脚本，甚至更多。如果我更改名称。

简化这个的最佳方法是什么，还是 3 套脚本是唯一的方法？

使用 fullpage.js，您可以定位每张幻灯片，是否有创建 if 语句的方法？

afterLoad: function(anchorLink, index){
    if(index == 3 && anchorLink == 'golden-visa'){
        $('body.fp-viewing-slidefree').find('.fp-section').index();
            $.fn.fullpage.setAllowScrolling(true, 'all'); 
            $.fn.fullpage.setKeyboardScrolling(true, 'all');
    }   

P.S 我相信只要学习下一步，下面的代码也可以写得更好。

谢谢大家

所有控制一个 Slick slider 实例的脚本及其类名是“.PlatformSlide”:

//After Slider changes
$('.PlatformSlide').on('afterChange', function(event, slick, currentSlide){
        if (currentSlide === 0) {
            $("#platformS1").click();
            $('.s22bt').removeClass('s22btActive');
            setTimeout(function(){
            },100);
            setTimeout(function(){
                $('.s22bt').addClass('s22btActive');
             },110);
        }   
        if (currentSlide === 1) {
            $("#platformS2").click();
            $('.s22bt').removeClass('s22btActive');
            setTimeout(function(){
            },100);
            setTimeout(function(){
                $('.s22bt').addClass('s22btActive');
             },110);
        }   
        if (currentSlide === 2) {
            $("#platformS3").click();
            $('.s22bt').removeClass('s22btActive');
            setTimeout(function(){
            },100);
            setTimeout(function(){
                $('.s22bt').addClass('s22btActive');
             },110);
        }   
});

// Slider Buttons
var feedP = $('.PlatformSlide');
$("#platformS1").click(function(e){ 
 e.preventDefault(); 
        slideIndex = $(this).attr('data-text'); 
        feedP.slick('slickGoTo', 0, true );
        $(".s22btbTopBox-left").removeClass("s22btbTopBox-leftActive");
        $(".TBoxL1").addClass("s22btbTopBox-leftActive");
        $(".s22btbTopBox-right").removeClass("s22btbTopBox-rightActive");
        $("#TBoxR1").addClass("s22btbTopBox-rightActive");
}); 

 var feedP = $('.PlatformSlide');
$("#platformS2").click(function(e){ 
 e.preventDefault(); 
 slideIndex = $(this).attr('data-text'); 
 feedP.slick('slickGoTo', 1, true ); 
 $(".s22btbTopBox-left").removeClass("s22btbTopBox-leftActive");
 $("#TBoxL2").addClass("s22btbTopBox-leftActive");
 $(".s22btbTopBox-right").removeClass("s22btbTopBox-rightActive");
 $("#TBoxR2").addClass("s22btbTopBox-rightActive");
});

 var feedP = $('.PlatformSlide');
$("#platformS3").click(function(e){ 
 e.preventDefault(); 
 slideIndex = $(this).attr('data-text'); 
 feedP.slick('slickGoTo', 2, true );
 $(".s22btbTopBox-left").removeClass("s22btbTopBox-leftActive");
 $("#TBoxL3").addClass("s22btbTopBox-leftActive");
 $(".s22btbTopBox-right").removeClass("s22btbTopBox-rightActive");
 $("#TBoxR3").addClass("s22btbTopBox-rightActive");
}); 


// Animate Platform Slide
$('.PlatformSlide').on('init', function(e, slick) {
    var $firstAnimatingElementsP = $('div.sbmt:first-child').find('[data-animation]');
    doAnimations($firstAnimatingElementsP);    
});

$('.PlatformSlide').on('beforeChange', function(e, slick, currentSlide, nextSlide) {
                var $animatingElementsP = $('div.sbmt[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
                doAnimations($animatingElementsP);              
});

function doAnimations(elements) {
    var animationEndEventsP = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    elements.each(function() {
            var $this = $(this);
            var $animationDelayP = $this.data('delay');
            var $animationTypeP = 'animated ' + $this.data('animation');
            $this.css({
                    'animation-delay': $animationDelayP,
                    '-webkit-animation-delay': $animationDelayP
            });
            $this.addClass($animationType).one(animationEndEventsP, function() {
                    $this.removeClass($animationTypeP);
            });
    });
}

Answer 1

我选择根据已设置的 ID 执行所有操作。相反，我宁愿拥有一个更容易获得数字的数据属性，但我不知道您的 html 布局。

    $('.PlatformSlide').on('afterChange', function(event, slick, currentSlide){
        $("#platformS" + (currendSlide + 1)).click()
        $('.s22bt').removeClass('s22btActive');
        setTimeout(function(){
        },100);
        setTimeout(function(){
                $('.s22bt').addClass('s22btActive');
         },110);
    }).on('init', function(e, slick) {
        var $firstAnimatingElementsP = $('div.sbmt:first-child').find('[data-animation]');
        doAnimations($firstAnimatingElementsP);    
    }).on('beforeChange', function(e, slick, currentSlide, nextSlide) {
        var $animatingElementsP = $('div.sbmt[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
        doAnimations($animatingElementsP);              
    });

    var feedP = $('.PlatformSlide');
    $("#platformS1, #platformS2, #platformS3").click(function(e){ 
        e.preventDefault(); 
        slideIndex = $(this).attr('data-text');
        var myId = $(this).attr("id");
        feedP.slick('slickGoTo', (parseInt(myId[myId.length-1]) - 1), true );
        $(".s22btbTopBox-left").removeClass("s22btbTopBox-leftActive");
        $(".TBoxL1").addClass("s22btbTopBox-leftActive");
        $(".s22btbTopBox-right").removeClass("s22btbTopBox-rightActive");
        $("#TBoxR1").addClass("s22btbTopBox-rightActive");
    }); 

    function doAnimations(elements) {
        var animationEndEventsP = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        elements.each(function() {
            var $this = $(this);
            var $animationDelayP = $this.data('delay');
            var $animationTypeP = 'animated ' + $this.data('animation');
            $this.css({
                'animation-delay': $animationDelayP,
                '-webkit-animation-delay': $animationDelayP
            });
            $this.addClass($animationType).one(animationEndEventsP, function() {
                $this.removeClass($animationTypeP);
            });
        });
    }