0

現在、私はWebサイトでColorboxプラグインに取り組んでいます..

ページに一連のリンクがあります..（リンクが50になるとします）..

このリンクはいくつかのデータを保持します。つまり、各リンクは 1 つのページを保持します。リンクをクリックしたときに、このページをカラーボックスに表示したい。

このために、私はカラーボックスを使用しています..最初にクリックした最初のリンクに対してのみ機能します。同じページの別のリンクをクリックすると、カラー ボックスが機能しません。

のようなエラーが表示されます..

キャッチされていない 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>

カラーボックスを呼び出すために以下のコードを使用しました。

 $(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});
                  }); 

 });

オンの代わりにライブも試しましたが、結果は得られませんでした。

4

1 に答える 1

2

私の意見では、ユーザーがリンクをクリックするたびにカラーボックスを初期化する必要はありません。

一度にイニシャルを付ける必要があります。そうすれば、これらのリンクは期待どおりに機能します。

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

これがお役に立てば幸いです。

于 2013-11-08T11:05:32.040 に答える