如何让图片库更容易

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

});