Question

目前我正在使用网站上的Colorbox插件..

我在页面中有一组链接..（说链接将是50）..

此链接包含一些数据..即，每个链接保存一页。当我点击我的链接时，我想在彩色框中显示此页面。

为此，我使用了colorbox ..它仅适用于我首先点击的第一个链接。如果我点击同一页面中的另一个链接，则颜色框将不起作用。

显示错误，如..

未捕获TypeError：对象[object Object]没有方法'colorbox'

我有这样的链接。

<a href="link1" id="dynamicid" class="colorbox"></a>
<a href="link2"  id="dynamicid" class="colorbox"></a>
<a href="link3" id="dynamicid" class="colorbox"></a>
<a href="link4" id="dynamicid" class="colorbox"></a>

我使用下面的代码来调用colorbox。

 $(document).ready(function () {

     jQuery(".colorbox").on("click",function(event) {
                  console.log('i am here...');
                    event.preventDefault();
                    var elementURL = jQuery(this).attr("href");                     var elementID = jQuery(this).attr("id");
                    jQuery("#"+elementID).colorbox({href: elementURL, innerWidth: 1000, innerHeight: 700});
                  }); 

 });

我也尝试过现场而不是，但我没有得到任何结果。

Answer 1

在我看来，每次用户点击链接时都不需要初始颜色框。

您应该立即初始化它们，然后这些链接将按预期工作。

<强> HTML

<a class="color-anchor" href="http://www.bbc.co.uk/">BBC</a>
<a class="color-anchor" href="http://edition.cnn.com/">CNN</a>

<强> JS

$(function(){
    $("a.color-anchor").colorbox({href:$(this).attr("href") ,innerWidth: 700, innerHeight: 500, iframe:true});
});

希望这对你有所帮助。

Colorbox插件仅适用于我首先点击的第一个链接。

1 个答案: