0

次の機能を動作させることができません。

クラス .image をクリックすると、3 つの div (ギャラリーテキスト、画像、サムセット) のコンテンツが置き換えられます。私はこれを何日も機能させようとしてきましたが、何が間違っているのかわかりません。

私のコード:

     // Init load 
  $(document).ready(function() {
        var $doc = $(document.body);


        var text = $('#gallerytext1').html();  //blank divs are filled with content on page load 
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);  
        $('#image').html('<img src="images/edwards1.jpg" border="0"/>');


    //click handler
       $doc.on("click",".image",function(){

        var image=$(".image").attr("rel"); 
        var imid=$(".image").attr("data");
        var text=$('#gallerytext'+imid).html();
        var thumbset=('#thumbset'+imid).html();

        $('#debug').html(imid);

        $('#gallerytext').fadeIn('slow');
        $('#gallerytext').html(text);
        $('#thumbset').fadeIn('slow');
        $('#thumbset').html(thumbset);
        $('#image').hide();                 
        $('#image').fadeIn('slow');
        $('#image').html('<img src="' + image + '"/>');
        return false;


      });
  });

最初のコンテンツは正常にロードされますが、クリック ハンドラーを動作させることができません。クラス .image を持つオブジェクトは、次のようにフォーマットされます。

<a href="#" rel="images/edwards2.jpg" data="1" class="image image2"><img src="images/edwardsthumb2.jpg" class="thumb" border="0"/></a>

どんな援助でも大歓迎です、ありがとう。

4

1 に答える 1

0

これらはおそらくあなたの問題のある行です:

var image=$(".image").attr("rel"); 
var imid=$(".image").attr("data");

$(".image")のクラスを持つすべての要素を選択しimageます。クリックされたものだけが必要なので、それthisを参照するために使用します:

var image = $(this).attr("rel"); 
var imid = $(this).attr("data");

また、 のようなカスタム属性を作成しないでくださいdata。HTML5 ではdata-、カスタム データ型を格納するために使用される属性が導入されたので、それらを使用します。

data-number="1"

.data()そして、次のメソッドでアクセスできます。

var imid = $(this).data('number');
于 2013-02-10T02:23:53.693 に答える