将函数添加到可变数量的链接 onclick 事件答案

【问题标题】：Add function to variable number of links onclick events将函数添加到可变数量的链接 onclick 事件
【发布时间】：2013-02-13 05:45:43
【问题描述】：

我有一点 JQuery 和 javascrip 可以用较小缩略图的 src 更改大图像的 src 属性。缩略图的数量会有所不同，具体取决于上传的图像。

我下面的代码在单击缩略图时可以工作，但是要为每个缩略图创建 onclick 事件，我必须遍历列表中的每张照片并写出 "$('#thumb_n').click(function ()..." 用于每个缩略图。

请问有更简单的方法吗？

<script>
$(document).ready(function(){
    $('#thumb_1').click(function(){
        changeImgSrc($('#detailImage'), "/images/photos/1/small/draughtDesign_01.jpg");
    });
    $('#thumb_4').click(function(){
        changeImgSrc($('#detailImage'), "/images/photos/1/small/draughtDesign_02.jpg");
    });
    $('#thumb_5').click(function(){
        changeImgSrc($('#detailImage'), "/images/photos/1/small/draughtDesign_03.jpg");
    });
});

function changeImgSrc(targetImg, sourceMSallImgURL){
    var thbSource = sourceMSallImgURL;
    var lrgSource = thbSource.replace('/small/', '/large/');
    targetImg.attr("src", lrgSource);
}
</script>

<div class="galleryPhotos">
                <span class="galleryPic shadow"><img src="/images/photos/1/large/draughtDesign_01.jpg" id="detailImage" width="515" height="380" alt="photo description 1" /></span>
            <ul>
                <li><a href="javascript: return false;" title="photo description 1"><img src="/images/photos/1/small/draughtDesign_01.jpg" width="160" height="115" id="thumb_1" alt="photo description 1" /></a></li>
                <li><a href="javascript: return false;" title="photo description 2"><img src="/images/photos/1/small/draughtDesign_02.jpg" width="160" height="115" id="thumb_4" alt="photo description 2" /></a></li>
                <li><a href="javascript: return false;" title="photo description 3"><img src="/images/photos/1/small/draughtDesign_03.jpg" width="160" height="115" id="thumb_5" alt="photo description 3" /></a></li>
        </ul>
</div>

【问题讨论】：

您是否使用我的解决方案？

标签： jquery html image frontend

【解决方案1】：

使用这个：

$('.galleryPhotos ul li a img').click(function(){
    changeImgSrc($('#detailImage'), $(this).attr("src"));
});

或者给<li>标签中的所有图片添加一个类（例如thumbImages）然后

$('.thumbImages').click(function(){
    changeImgSrc($('#detailImage'), $(this).attr("src"));
});

【讨论】：

欢迎... 乐于助人.. :)

【解决方案2】：

像这样将“thum_Img”类添加到每个缩略图标签中。

<img src="/images/photos/1/small/draughtDesign_01.jpg" width="160" height="115" id="thumb_1" alt="photo description 1" class="thum_Img"/>

然后执行以下操作...

$('.thumb_Img').click(function(){
        changeImgSrc($('#detailImage'), $(this).attr("src"));
    });

【讨论】：