jQuery-多個圖像的onclick縮放功能

Question

我想問您有關將以下代碼重用於多個圖像的方法： http : //jsfiddle.net/a8c9P/

如何避免CSS代碼中的冗余？

一個更新的示例： http : //jsfiddle.net/a8c9P/156

$("#imgSmall").click(function() {     
    $("#imgBig").attr("src", "http://www.freeimageslive.com/galleries/sports/music/pics/musical_notes.jpg");
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#imgBig").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});

Answer 1

首先-如果您要使用ID，則ID應該始終是唯一的。 記住，任何時候您都希望以“ jQuery”方式將特定行為應用於許多元素-這是使用類而不是id的完美案例。 一個例子：

$(".myClass").click(function(){
    $("#imgBig").attr("src", $(this).attr("src"));
    $("#overlay").show();
    $("#overlayContent").show();
});

你會注意到，我用this也就是被點擊的確切項目的參考！ 現在，您不必擔心會有許多相同類型的元素！

查看該字段

Answer 2

您需要多個ID和一個HTML類來處理CSS。 每個元素只能有一個ID，但是可以繼承多個類。 定義.imgSmall和.imgBig類，使用它們來處理CSS，然后使用適合您的ID方案進行點擊檢測。

我建議使用img1，img1，img2和bigimg1，bigimg2，bigimg3之類的東西，因為那樣會使您在循環中生成所有html。

Answer 3

http://jsfiddle.net/a8c9P/157/

的HTML

<div id="overlay"></div>
<div id="overlayContent">
    <img id="imgBig" src="" alt="" width="400" />
</div>

<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />


<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />

<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />

JS

$(".imgSmall").click(function(){
    $("#imgBig").attr("src",$(this).attr('src'));
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#imgBig").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});

的CSS

#overlay{
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    background-color: #000; 
    opacity: 0.7;
    filter: alpha(opacity = 70) !important;
    display: none;
    z-index: 100;

}

#overlayContent{
    position: fixed; 
    width: 100%;
    top: 100px;
    text-align: center;
    display: none;
    overflow: hidden;
    z-index: 100;
}

#contentGallery{
    margin: 0px auto;
}

#imgBig, .imgSmall{
    cursor: pointer;
}