Javascript 如何在没有硬编码的情况下使用 colorbox 在我的页面上显示隐藏的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3790624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use colorbox to show hidden divs on my page without hardcoding?
提问by Jiert
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:
我正在使用 Colorbox 在我的页面上显示隐藏 div 的 html 内容。我可以让它与以下内容完美配合：
$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"});
This will show the div with the ID of 344.
这将显示 ID 为 344 的 div。
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.
但是，因为我正在尝试使用 WordPress 构建一个可扩展的动态页面，所以我希望能够通过一个函数获取我的 div 的 ID，而不是在 jquery 调用中对它们进行硬编码。
I modified Hyman Moore's example:
我修改了Hyman摩尔的例子：
$("a[rel='example']").colorbox({title: function(){
var url = $(this).attr('href');
return '<a href="'+url+'" target="_blank">Open In New Window</a>';
}});
so that it looks like this:
所以它看起来像这样：
$(".colorbox").colorbox({width:"600px", inline:true, href:function(){
var elementID = $(this).attr('id');
return 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.
问题在于 colorbox 函数的 href 属性正在查找 ID 前面带有 # 标记的字符串。我尝试了各种将# 连接到函数前面的方法，包括返回值中的#，以及将# 连接到elementID 变量。没运气。
I also tried using the syntax in Hyman's example (with no luck) so that my return statement looked like this:
我还尝试使用 Hyman 示例中的语法（没有运气），因此我的 return 语句如下所示：
return "#'+elementID+'";
I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?
我认为我的基本问题是：如何使用 colorbox 在我的页面上显示隐藏的 div 而不对所有内容进行硬编码？
Thanks for your help, Jiert
谢谢你的帮助，吉尔特
采纳答案by Liam Bailey
return "#" + elementID;
will have the desired effect as David says.
将达到大卫所说的预期效果。
回答by Daniel Tonon
I didn't really like any of the answers given above. This is how I did it (similar but not quite the same). I also fully commented it for people a bit new to Javascript and the colorbox plug in.
我真的不喜欢上面给出的任何答案。我就是这样做的（类似但不完全相同）。我还为那些对 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
})
}
});
And this is the html:
这是 html：
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
I think it would work with multiple lightboxes on the one page but I haven't tested it with that.
我认为它可以在一页上与多个灯箱一起使用，但我还没有对此进行测试。
回答by Ash
I'm facing the same issue. What does your html look like? meaning, how did you structure your "divs"
我面临同样的问题。你的 html 是什么样的？意思是，你是如何构建你的“div”的
Mine looks like this: Javascript:
我的看起来像这样：Javascript：
<script>
$(document).ready(function () {
$("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
var elementID = $(this).attr('id');
return "#" + elementID;
}
});
});
</script>
And the html looks like (I tried changing the display:none):
并且 html 看起来像（我尝试更改显示：无）：
<a class='colorbox' href="#">Inline HTML</a>
<div style="display:none">
<div id="pop">
This data is to be displayed in colorbox
</div>
</div>
回答by Ricky G
This is the way I got it to work
这是我让它工作的方式
HTML: (taken from the example in one of the answers)
HTML：（取自其中一个答案中的示例）
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
Javascript:
Javascript：
$('a.lightboxTrigger').click(function(){
var ref = $(this).attr("href");
$.colorbox({ html: $(ref).html() });
$.colorbox.resize();
});
