如何在没有硬编码的情况下使用colorbox在我的页面上显示隐藏的div？ [英] How do I use colorbox to show hidden divs on my page without hardcoding?

问题描述

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

I'm using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following:

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

这将显示ID为344的div。

This will show the div with the ID of 344.

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

However, because I'm trying to build a scalable and dynamic page with WordPress, I want to be able to grab the ID of my divs through a function, rather than hard code them in the jquery call.

我修改了Jack Moore的例子：

I modified Jack Moore's example:

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

所以它看起来像这样：

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

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

The problem with this is that the href property of the colorbox function is looking for a string with a # mark infront of the ID. I tried various ways of concatenating the # to the front of the function, including the # in the return value, and concatenating the # to the elementID variable. No luck.

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

I also tried using the syntax in Jack's example (with no luck) so that my return statement looked like this:

return "#'+elementID+'";

我认为我的基本问题是：如何在没有硬编码的情况下使用colorbox在我的页面上显示隐藏的div什么？

I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?

感谢您的帮助，
杰特

Thanks for your help, Jiert

推荐答案

return "#" + elementID; 

会像David所说的那样产生预期效果。

will have the desired effect as David says.

这篇关于如何在没有硬编码的情况下使用colorbox在我的页面上显示隐藏的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！