0

我是 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'});
                    });


            });
});

你可以在这里查看它是如何工作的。

我真正想知道的是可以减少我们使用的 ID 数量吗？

因为截至目前，我们有#carousel-1 + 2 + 3很多看似不必要的 ID。

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

预先感谢！

4

1 回答 1

1

是的，使用类代替 id，因此您的代码对所有 3 个滑块都具有通用性。

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

frontpageSlider在类而不是 id上写你的 jQuery

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

$(".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。

于 2012-12-20T08:21:18.867 回答