如何在没有硬编码的情况下使用colorbox在我的页面上显示隐藏的div？

我正在使用Colorbox在我的页面上显示隐藏div的html内容。 我可以通过以下方式完美地工作：

$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"}); 

这将显示ID为344的div。

但是，因为我正在尝试使用WordPress构建可伸缩的动态页面，所以我希望能够通过函数获取我的div的ID，而不是在jquery调用中对它们进行硬编码。

我修改了杰克摩尔的例子：

 $("a[rel='example']").colorbox({title: function(){ var url = $(this).attr('href'); return 'Open In New Window'; }}); 

所以它看起来像这样：

 $(".colorbox").colorbox({width:"600px", inline:true, href:function(){ var elementID = $(this).attr('id'); return elementID; }}); 

这个问题是colorbox函数的href属性正在寻找一个带有ID标记的字符串。 我尝试了将＃连接到函数前面的各种方法，包括返回值中的＃，以及将＃连接到elementID变量。 没运气。

我也试过在Jack的例子中使用语法（没有运气），所以我的return语句看起来像这样：

 return "#'+elementID+'"; 

我认为我的基本问题是：如何在不对所有内容进行硬编码的情况下使用colorbox在我的页面上显示隐藏的div？

谢谢你的帮助，杰特

Answer 1

 return "#" + elementID; 

大卫说，会产生预期的效果。

Answer 2

我真的不喜欢上面给出的任何答案。 这就是我做的方式（类似但不完全相同）。 我也对Javascript和colorbox插件有点新的人进行了充分的评论。

 $(document).ready(function() { //waits until the DOM has finished loading if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page $('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page... var url = $(this).attr("href"); // sets the link url as the target div of the lightbox $(url).hide(); //hides the lightbox content div $(this).colorbox({ inline:true, // so it knows that it's looking for an internal href href:url, // tells it which content to show width:"70%", onOpen:function(){ //triggers a callback when the lightbox opens $(url).show(); //when the lightbox opens, show the content div }, onCleanup:function(){ $(url).hide(); //hides the content div when the lightbox closes } }).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked //you could also use "return false" for the same effect but I proffered that way }) } }); 

这是html：

 Lightbox trigger 
  
Lightbox content goes here
  

我认为它可以在一个页面上使用多个灯箱，但我没有用它进行测试。

Answer 3

我面临同样的问题。 你的HTML是什么样的？ 意思是，你是如何构建你的“div”的

我看起来像这样：Javascript：

并且html看起来像（我尝试更改display：none）：

 Inline HTML 
 
 This data is to be displayed in colorbox 
  

Answer 4

这是我开始工作的方式

HTML :(取自其中一个答案中的示例）

 Lightbox trigger 
  
Lightbox content goes here
  

使用Javascript：

 $('a.lightboxTrigger').click(function(){ var ref = $(this).attr("href"); $.colorbox({ html: $(ref).html() }); $.colorbox.resize(); });