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标记的类，然后显示带有相应ID的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});
});

我需要压缩这个javascript代码

5 个答案: