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

这是FIDDLE

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"
});