Question

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

我将代码复制到了新的部分。现在，我想使代码保持较小，以便为eack Slick编写单独的CSS和脚本是不好的。

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

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

什么是简化此流程的最佳方法，还是3套脚本是唯一方法？

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

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滑块的一个实例且其类名称为“ .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进行所有操作。相反，我宁愿拥有一个具有更容易获得的数字的data属性，但我不知道您的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);
            });
        });
    }

如何为多个元素设置脚本

1 个答案: