如何讓圖片庫更容易

Question

我知道如何使用javascript製作圖片庫..當我點擊一張圖片時，它會變得更大......好吧，如果我有50張圖片...我必須爲我寫50個函數畫廊工作！ ... 我的問題是...有沒有一種方法來寫一個簡短的功能，這將節省我的時間和負擔？

例如，這是功能之一：

function changeImg1(){ 
    $("#show").hide("explode"); 
    $("#show").show("bounce"); 
    $("#captionText").hide("explode"); 
    $("#captionText").show("pulsate"); 
    showImage.setAttribute("src",images[1]); 
    showCaption.innerHTML=(captions[1]); 
    imageIndex=1; 
    captionIndex=1; 
}; 

非常感謝球員，我從您那裏學到了很多......

Answer 1

你需要閱讀有關「本」的JS和jQuery 。例如

$(".many_many_img_with_same_class").click(function(){ 

    var current_img_src = $(this).attr("src"); 

    alert(current_img_src); 

}); 

所以比你點擊img，函數運行在這個img的上下文中，並且總是顯示被點擊的img的src。 p.s.在評論

HTML

<img src="/some/place1" data-any-spec-text="my text 1" class="many_many_img_with_same_class"> 
<img src="/some/place124" data-any-spec-text="my text 222" class="many_many_img_with_same_class"> 
<img src="/some/other/place" data-any-spec-text="more text 222" class="many_many_img_with_same_class"> 

JS

$(".many_many_img_with_same_class").click(function(){ 

    var current_img_src = $(this).attr("src"); 
    var current_img_capton_info = $(this).data("any-spec-text"); 

    alert(current_img_src, current_img_capton_info); 

});