0

大きな画像のsrc属性を小さなサムネイルのsrcに変更するために、JQueryとjavascripを少し持っています。アップロードする画像に応じて、サムネイルの数は異なります。

以下のコードはサムネイルをクリックすると機能しますが、サムネイルごとに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>
4

2 に答える 2

1

これを使って： 

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

または、タグthumbImages内のすべての画像にクラス（たとえば）を追加してから<li>

$('.thumbImages').click(function(){
    changeImgSrc($('#detailImage'), $(this).attr("src"));
});
于 2013-02-27T12:33:37.990 に答える
0

このように、各サムネイル画像タグにクラス「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-27T12:12:06.793 に答える