我需要凝結這段JavaScript代碼

Question

我需要得到下面的JavaScript代碼以下任一環節的工作：

<a href="#" class="example1">http://example.com</a> 
<a href="#" class="test">Doesnt work now</a> 

被鏈接後顯示的代碼點：

<div style='display:none'> 
    <div id='example1' style='padding:10px; background:#fff;'> 
     <a href="http://example.com" target="_blank">Link</a> 
    </div> 
</div> 

的JavaScript代碼，我需要凝聚與任何類/ ID值，我給的工作：

<script> 
    $(document).ready(function(){ 
     $(".example1").colorbox({width:"50%", inline:true, href:"#example1"}); 
     $(".example2").colorbox({width:"50%", inline:true, href:"#example2"}); 
     $(".example3").colorbox({width:"50%", inline:true, href:"#example3"}); 
     $(".example4").colorbox({width:"50%", inline:true, href:"#example4"}); 
     $(".example5").colorbox({width:"50%", inline:true, href:"#example5"}); 
    }); 

Answer 1

$("[class^='example']").each(function() { 
    $(this).colorbox({width:"50%", 
         inline:true, 
         href:"#example" + $(this).attr("class").replace("example", "") 
    }); 
}); 

或更簡單：

$("[class^='example']").each(function() { 
    $(this).colorbox({width:"50%", 
         inline:true, 
         href:"#" + $(this).attr("class") 
    }); 
}); 

Answer 2

function myColorBox(myClass, myLink) { 
    return $("."+myClass).colorbox({width:"50%", inline:true, href:myLink}); 
}; 

Answer 3

目前還不清楚你問什麼，但它聽起來像你需要一個通用的方法來執行你的JavaScript代碼段列出的操作。嘗試是這樣的：

function doColorBox(sel, href) { 
    return $(sel).colorbox({width:'50%', inline:true, href:href}); 
} 
$(document).ready(function() { 
    doColorBox('.example1', '#example1'); 
    doColorBox('.test', 'http://test.com'); 
    doColorBox('#foo', '#foo'); 
}); 

Answer 4

這裏就是你要找什麼，我相信，http://jsfiddle.net/Skooljester/LggeY/。它獲取a標籤的類，然後顯示帶有相應標識的div。

Answer 5

一個簡單的for循環實際上可能比這些jQuery API的某些巧妙使用位更精簡。

$(document).ready(function(){ 
    for (var i = 1; i < 6; i++) 
    $(".example" + i).colorbox({width:"50%", inline: true, href:"#example" + i}); 
});