将函数添加到可变数目的链接onclick事件

我有一些JQuery和javascrip用较小的缩略图的src更改大图像的src属性。根据上传的图像数量不同，缩略图的数量也不尽相同。将函数添加到可变数目的链接onclick事件

下面的代码在单击缩略图时工作，但为每个缩略图创建onclick事件我不得不遍历列表中的每张照片并写出“$（'＃thumb_n'）。单击（（）函数...”为每个缩略图。

有没有更简单的方式来做到这一点吗？

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

来源

2013-02-27 John Cogan

没有你让它与我的解决方案一起工作？ – 2013-02-27 12:22:04

使用此：

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

或者在<li>标签添加一个类（例如thumbImages）所有图像，然后

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

来源

2013-02-27 12:33:37 Anujith

完美的感谢A.V. – 2013-02-27 13:05:28

欢迎...很高兴能成为.. .. :) – Anujith 2013-02-27 13:06:37

添加类‘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")); 
    });

来源

2013-02-27 12:12:06

将函数添加到可变数目的链接onclick事件

回答

相关问题