可能有人向noob解釋這個jquery如何創建一個圖庫？

Question

我不明白這裏發生了什麼。如果有人能解釋，我將不勝感激。我需要創建一個照片庫，並建議查看此代碼，但我不明白它是如何工作的。

$(document).ready(function(){ 
    imageSwapper(".thumbnails a"); 
}); 

function imageSwapper(link) { 
    $(link).click(function(){ 
    $('#largeimage').attr('src', this.href); 
    return false; 
    }); 
}; 

Answer 1

像這樣：

// When the document is ready 
$(document).ready(function(){ 
    // Call this function with this string (a CSS selector) 
    imageSwapper(".thumbnails a"); 
}); 

function imageSwapper(link) { 
    // With all the elements matching link (all the <a>'s under <tag class="thumbnails">) 
    // Set their onClick to be this anonymous function 
    $(link).click(function(){ 
     // Get the element with id="largeimage" 
     // and set it's src attribute to the href of the link we clicked on 
     $('#largeimage').attr('src', this.href); 
     // Cancel the default action (don't go to the href of the link we clicked on 
     return false; 
    }); 
}; 

Answer 2

有與文檔準備事件類縮略圖行了容器：

imageSwapper(".thumbnails a"); 

通過在所述錨定的（a）元素容器的功能immageSwapper

在功能

$(link).click(function() 

結合通過錨元件與功能單擊事件：

function(){ 
    $('#largeimage').attr('src', this.href); 
    return false; 
} 

其設定SRC圖像的屬性，其中（*假想*）示出大的圖像到單擊錨元素的屬性的值。

Answer 3

此代碼將click事件綁定到具有類縮略圖的元素的子元素的所有鏈接。當單擊其中一個鏈接時，它將設置id = largeimage的元素的src屬性。

的HTML可能是這樣的：

<div class="thumbnails"> 
<a href="image1.jpg"><img src="thumb1.jpg"/></a> 
<a href="image2.jpg"><img src="thumb2.jpg"/></a> 
<a href="image3.jpg"><img src="thumb3.jpg"/></a> 
</div> 
<img id="largeimage"/>