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)スライダー間の競合を避けるために使用します。

frontpageSliderIDの代わりにクラスに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 に答える