jQuery點擊處理程序不起作用

Question

我無法獲得以下功能。

點擊class .image，3 div（gallerytext，image和thumbset）中的內容將被替換。我一直試圖讓這個工作好幾天，我無法弄清楚我做錯了什麼。

我的代碼：

 // 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> 

任何援助將不勝感激，謝謝。

Answer 1

這大概會是你的問題的線路：

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