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

jQuery Colorbox：Clicked元素隐藏在背景中

1 个答案: