將函數添加到可變數目的鏈接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事件

回答

相關問題