jQuery Colorbox:单击的元素隐藏背景

Question

我有一个场景，我不需要div 之外的标签，例如：

<a href="#box">
<div class="colorboxElements">click here!</div>
</a>
<div id="box">here is the content!</div>

因此，我必须对每个div 元素使用 href，然后我为班级的精灵提供 ID：

$('.colorboxElements').each(function(index) {
$(this).attr("href","#box"+index);
$(this).attr("id","box"+index);
});
$(".colorboxElements").colorbox({rel:'colorboxElements', inline:true, href:$(this).attr('href'), transition:"none", width:"75%", height:"auto"});

现在，当我单击类 .colorboxElements 的任何元素时，它会显示在颜色框上，但问题是单击的元素从背景中隐藏，并且当我单击返回到达第一个元素时，"上一个"和"下一个"按钮不起作用，然后单击最后一个元素之后的下一个分别

。

http://jsfiddle.net/etRtm/

Answer 1

这是一个小提琴

.HTML

<div class="colorboxElements"> 
    <a href="#box">click here!</a>
    <div id="box" class="box">here is the content!</div>
</div>

.JS

$('.colorboxElements a').each(function (index) {
    $(this).attr("href", "#box" + index);
    $(this).siblings('.box').attr("id", "box" + index);
});
$(".colorboxElements a").colorbox({
    rel: 'colorboxElements',
    inline: true,
    transition: "none",
    width: "75%",
    height: "auto"
});