我的页面上有3个滑块，使用ContentSlider脚本，我可以减少代码吗？

Question

我是Javascript(jQuery)世界的新手，我似乎真的不知道我在做什么。

所以我决定问你！

我这里有一段Javascript

    $(document).ready(function() {
            //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
            $('#carousel-1 #carousel_ul li:first').before($('#carousel-1 #carousel_ul li:last')); 


            //when user clicks the image for sliding right        
            $('#carousel-1 .navNext').click(function(){

                    //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
                    var item_width = $('#carousel-1 #carousel_ul li').outerWidth() + 18;

                    //calculae the new left indent of the unordered list
                    var left_indent = parseInt($('#carousel-1 #carousel_ul').css('left')) - item_width;

                    //make the sliding effect using jquery's anumate function '
                    $('#carousel-1 #carousel_ul:not(:animated)').animate({'left' : left_indent},250,function(){    

                            //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                            $('#carousel-1 #carousel_ul li:last').after($('#carousel-1 #carousel_ul li:first')); 

                            //and get the left indent to the default -210px
                            $('#carousel-1 #carousel_ul').css({'left' : '-179px'});
                    }); 
            });

            //when user clicks the image for sliding left
            $('#carousel-1 .navPrev').click(function(){

                    var item_width = $('#carousel-1 #carousel_ul li').outerWidth() + 18;

                    /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
                    var left_indent = parseInt($('#carousel-1 #carousel_ul').css('left')) + item_width;

                    $('#carousel-1 #carousel_ul:not(:animated)').animate({'left' : left_indent},250,function(){    

                    /* when sliding to left we are moving the last item before the first list item */            
                    $('#carousel-1 #carousel_ul li:first').before($('#carousel-1 #carousel_ul li:last')); 

                    /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
                    $('#carousel-1 #carousel_ul').css({'left' : '-179px'});
                    });


            });
});



$(document).ready(function() {
            //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
            $('#carousel-2 #carousel_ul li:first').before($('#carousel-2 #carousel_ul li:last')); 


            //when user clicks the image for sliding right        
            $('#carousel-2 .navNext').click(function(){

                    //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
                    var item_width = $('#carousel-2 #carousel_ul li').outerWidth() + 18;

                    //calculae the new left indent of the unordered list
                    var left_indent = parseInt($('#carousel-2 #carousel_ul').css('left')) - item_width;

                    //make the sliding effect using jquery's anumate function '
                    $('#carousel-2 #carousel_ul:not(:animated)').animate({'left' : left_indent},250,function(){    

                            //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                            $('#carousel-2 #carousel_ul li:last').after($('#carousel-2 #carousel_ul li:first')); 

                            //and get the left indent to the default -210px
                            $('#carousel-2 #carousel_ul').css({'left' : '-179px'});
                    }); 
            });

            //when user clicks the image for sliding left
            $('#carousel-2 .navPrev').click(function(){

                    var item_width = $('#carousel-2 #carousel_ul li').outerWidth() + 18;

                    /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
                    var left_indent = parseInt($('#carousel-2 #carousel_ul').css('left')) + item_width;

                    $('#carousel-2 #carousel_ul:not(:animated)').animate({'left' : left_indent},250,function(){    

                    /* when sliding to left we are moving the last item before the first list item */            
                    $('#carousel-2 #carousel_ul li:first').before($('#carousel-2 #carousel_ul li:last')); 

                    /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
                    $('#carousel-2 #carousel_ul').css({'left' : '-179px'});
                    });


            });
});




$(document).ready(function() {
            //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
            $('#carousel-3 #carousel_ul li:first').before($('#carousel-3 #carousel_ul li:last')); 


            //when user clicks the image for sliding right        
            $('#carousel-3 .navNext').click(function(){

                    //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
                    var item_width = $('#carousel-3 #carousel_ul li').outerWidth() + 18;

                    //calculae the new left indent of the unordered list
                    var left_indent = parseInt($('#carousel-3 #carousel_ul').css('left')) - item_width;

                    //make the sliding effect using jquery's anumate function '
                    $('#carousel-3 #carousel_ul:not(:animated)').animate({'left' : left_indent},250,function(){    

                            //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                            $('#carousel-3 #carousel_ul li:last').after($('#carousel-3 #carousel_ul li:first')); 

                            //and get the left indent to the default -210px
                            $('#carousel-3 #carousel_ul').css({'left' : '-179px'});
                    }); 
            });

            //when user clicks the image for sliding left
            $('#carousel-3 .navPrev').click(function(){

                    var item_width = $('#carousel-3 #carousel_ul li').outerWidth() + 18;

                    /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
                    var left_indent = parseInt($('#carousel-3 #carousel_ul').css('left')) + item_width;

                    $('#carousel-3 #carousel_ul:not(:animated)').animate({'left' : left_indent},250,function(){    

                    /* when sliding to left we are moving the last item before the first list item */            
                    $('#carousel-3 #carousel_ul li:first').before($('#carousel-3 #carousel_ul li:last')); 

                    /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
                    $('#carousel-3 #carousel_ul').css({'left' : '-179px'});
                    });


            });
});

你可以在here上检查它是如何工作的。

我真正想知道的是，是否有可能降低我们正在使用的ID的数量？

因为到目前为止，我们有了#carousel-1 + 2 + 3，这是相当多看起来不必要的ID。

基本上，我们试图使JS代码比实际的更小。

首先谢谢你！

Answer 1

是的，使用类来代替id，这样你的代码就对所有3个滑块都是通用的。

此外，请使用$(this)避免滑块之间的冲突。

在类frontpageSlider上编写您的jQuery，而不是id的

所以你的代码应该是这样的，

$(".frontpageSlider .navPrev").click(function(){
    //This function will get called irrespective of which `.navPrev` you click.
    //To get the right context, use the $(this) jQuery object. given your structure you can get the carousel like so,

    var $carousel = $(this).parent(".frontpageSlider");

    //To get the `ul` of images you can do the following,

    var $ul = $(this).siblings("#carousel_container").find("#carousel_ul");

    //Write logic here
});

并对.navNext进行类似的点击处理。