轉換jQuery函數以便重複使用，不用重複

Question

我有以下函數可以將無序列表的每一行淡入淡出。現在它適用於#skills_hints，但我想將其用於其他#named_hints。有沒有一種方法可以在多個無序列表上重複使用此代碼，而無需複製和粘貼整個代碼並只需更改ID？

$(document).ready(function(){ 
    $('#skills_hints .hint'); 
    setInterval(function(){ 
     $('#skills_hints .hint').filter(':visible').fadeOut(800,function(){ 
      if($(this).next('li.hint').size()){ 
       $(this).next().fadeIn(800); 
      } 
      else{ 
       $('#skills_hints .hint').eq(0).fadeIn(800); 
      } 
     }); 
    },7000);  
}); 

Answer 1

以下將做的正是你已經張貼什麼和DOIT功能（你應該重命名這顯然）可以一次又一次地傳遞一個不同的ID。

function doit(id){ 
    $('#'+id+' .hint'); 
    setInterval(function(){ 
     $('#'+id+' .hint').filter(':visible').fadeOut(800,function(){ 
      if($(this).next('li.hint').size()){ 
       $(this).next().fadeIn(800); 
      } 
      else{ 
       $('#'+id+' .hint').eq(0).fadeIn(800); 
      } 
     }); 
    },7000);  
} 

$(function(){ 
    doit('skills_hints'); 
}) 

Answer 2

您可以將您的代碼放到一個jQuery插件（http://docs.jquery.com/Plugin）

Answer 3

一個很好的技巧就是把這個變成一個封閉，如果你需要一個單獨的函數作爲回調使用等

function doit(id_name){ 
    var id = '#'+id_name + '.hint'; 
    return (function(){ 
     $(id); 
     setInterval(function(){ 
      $(id).filter(':visible').fadeOut(800,function(){ 
       if($(this).next('li.hint').size()){ 
        $(this).next().fadeIn(800); 
       } 
       else{ 
        $(id).eq(0).fadeIn(800); 
       } 
      } 
     },7000); 
    }) 
} 

//examples 
doit_skills = doit('skills_hint'); 
doit(); 
doit_foo = doit('foo'); 
doit_foo() 

names = ['a', 'b']; 
for(var i=0; i<names.length; i++){ 
    doit(names[i])(); 
}