jquery複数のクリックのショートカット

Question

よく私はまだjs /プログラミングの新人です。 私のコードをどのように最適化することができますか？ 同じことをする小さくて速いコードを書く方法は複数あると確信しています。

$('.ourservices-content .left ul li:nth-child(1)').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '0px' 
     },800) 
    }) 

    $('.ourservices-content .left ul li:nth-child(2)').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '-600px' 
     },800) 
    }) 

    $('.ourservices-content .left ul li:nth-child(3)').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '-1200px' 
     },800) 
    }) 

    $('.ourservices-content .left ul li:nth-child(4)').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '-1800px' 
     },800) 
    }) 

    $('.ourservices-content .left ul li:nth-child(5)').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '-2400px' 
     },800) 
    }) 

    $('.ourservices-content .left ul li:nth-child(6)').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '-3000px' 
     },800) 
    }) 

    $('.ourservices-content .left ul li:nth-child(7)').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '-3600px' 
     },800) 
    }) 

Answer 1

これはそれを行う必要があります。

$('.ourservices-content .left ul li').each(function (index) { 
    $(this).click(function() { 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: '-' + (600 * index) + 'px'; 
     }, 800); 
    }); 
}); 

私たちがやっていることは、元$()呼び出しでセレクタにマッチした各要素をループされます。次に、マッチングされた各要素に対して、ゼロ要素から始まる要素インデックスによって、アニメーションパラメータmarginLeftを調整します。

Answer 2

あり私は考えることができるいくつかの方法がありますが、最も簡単で、functionにarrayでラインデータのアップを、それをラップすることです、そしてforループ内でfunctionを呼び出す：

function animate_box(count,margin) { 
    $('.ourservices-content .left ul li:nth-child('+count+')').click(function(){ 
     $('.our-services-content-box > ul.box').stop().animate({ 
      marginLeft: margin+'px' 
     },800) 
    }) 
} 
var left_margin=0; 
var indexes=[1,2,3,4,2,2]; 
for(var i=0;i<indexes.length;i++) { 
    animate_box(indexes[i],left_margin); 
    left_margin-=600; 
} 

Answer 3

私はこれを試す方法がありませんでしたが、このようなものがアイディアです...

var $items = $('.ourservices-content .left li'); 
for (var i = 0, len = $items.length; i < len; i++) { 
    $items.eq(i).click(function() { 
     $('.box').stop().animate({ 
      marginLeft : '-=600'; 
     }, 800) 
    }) 
}