JQuery函數101：如何重新使用這個函數而不是重新創建它？

Question

這是爲我的最後一個問題（現已解決）的相同頁面，但託管已經關閉，所以我不能顯示一個現場示例。 我使用Fearless Flyer的contentslider，因爲它具有我找到的最簡單的標記&代碼。在這裏看到： http://demo.fearlessflyer.com/html/demo/content-slider/

然而，很顯然它是爲每頁一個滑塊，而不是多個滑塊。如果我試圖用兩個滑塊不變地實現它，第二個滑塊不起作用，因爲滑動的負邊界值在第一個滑塊已經發生的計算的頂部相乘 - 所以邊距將縮小 - 向右移動4000像素，沒有要顯示的照片。

我已經得到了它與兩個滑塊工作，可使用以下加價：

我有兩個滑塊，一度被稱爲「lightbox_gallery」和一個叫「lightbox_5gruende」。

<div id="lightbox_gallery" class="lightbox_window"> 
    <div id="mother_gallery"> 
     <ul> 
      <li><img id="test" src="gallery_02.jpg" /><a class="next" href="#">next</a></li> 
      <li><img src="gallery_01.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li> 
      <li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover"    href="#">startover</a></li> 
     </ul> 
    </div> 
</div> <!--end lightbox div --> 

<div id="lightbox_5gruende" class="lightbox_window"> 
    <div id="mother_5gruende"> 
     <ul> 
      <li><img id="test" src="gallery_03.jpg" /><a class="next" href="#">next</a></li> 
      <li><img src="gallery_03.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li> 
      <li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li> 
     </ul> 
    </div> 
</div> <!--end lightbox div --> 

然後這個令人難以置信的哈​​克腳本：

$(window).load(function() { 

var theImage = $('#lightbox_gallery ul li img'); 
var theImage2 = $('#lightbox_5gruende ul li img'); 
var theWidth = 790; 

$('#mother_gallery').css({ 
    //stuff 
}); 
    //get total of image sizes and set as width for ul 
var totalWidth = theImage.length * theWidth; 
$('ul').css({ 
    width: function(){ 
    return totalWidth; 
} 

}); 
$('#mother_5gruende').css({ 
    //stuff 
}); 
    //get total of image sizes and set as width for ul 
var totalWidth = theImage.length * theWidth; 
$('ul').css({ 
    width: function(){ 
    return totalWidth; 
} 

}); 
$(theImage).each(  
    function(intIndex){    
      $(this).nextAll('a') 
      .bind("click", function(){ 
       if($(this).is(".next")) { 

        $(this).parent('li').parent('ul').animate({ 
         "margin-left": (-(intIndex + 1) * 790)    
        }, 1000)      

       } else if($(this).is(".previous")){ 

        $(this).parent('li').parent('ul').animate({ 
         "margin-left": (-(intIndex - 1) * 790)    
        }, 1000)  


       } else if($(this).is(".startover")){ 

        $(this).parent('li').parent('ul').animate({ 
         "margin-left": (0)    
        }, 1000) 

       } 

      });//close .bind()         
});//close .each() 

// THEN REPEATING THE SAME WITH SLIGHTLY DIFFERENT NAMES BECAUSE I DO NOT KNOW HOW TO WRITE A REUSABLE FUNCTION // 

$(theImage2).each(  
    function(intIndex2){     
      $(this).nextAll('a') 
      .bind("click", function(){ 
       if($(this).is(".next")) { 

        $(this).parent('li').parent('ul').animate({ 
         "margin-left": (-(intIndex2 + 1) * 790)    
        }, 1000)      

       } else if($(this).is(".previous")){ 

        $(this).parent('li').parent('ul').animate({ 
         "margin-left": (-(intIndex2 - 1) * 790)    
        }, 1000)  


       } else if($(this).is(".startover")){ 

        $(this).parent('li').parent('ul').animate({ 
         "margin-left": (0)    
        }, 1000) 

       } 

      });//close .bind()         
});//close .each() 

});//doc ready 

這是如此的醜陋好痛！它的工作原理，但我不想有兩個完全獨立的滑塊功能爲單獨的滑塊中的圖像做相同的事情。

如何重寫此內容以便$（theImage）.each中的計算可以用於兩個滑塊？

Answer 1

可以這樣做：

function animateParentUl($element, marginValue) { 
    $element.parent('li').parent('ul') 
     .animate({"margin-left": marginValue }, 1000) 
} 

然後調用它爲：

$(theImage2).each(  
    function(intIndex2){     
      $(this).nextAll('a') 
      .bind("click", function(){ 
       var $this = $(this); 
       if($this.is(".next")) { 
        animateParentUl($this, (-(intIndex2 + 1) * 790)); 
       } else if($this.is(".previous")){ 
        animateParentUl($this, (-(intIndex2 - 1) * 790)); 
       } else if($this.is(".startover")){ 
        animateParentUl($this, 0); 
       } 

      });//close .bind()         
});//close .each()