jQuery - 用于多个图像的onclick缩放功能

时间:2014-08-21 12:20:48

标签: javascript jquery html css

我想问一下为多个图片重用下面代码的方法: 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();
});

3 个答案:

答案 0 :(得分:1)

首先 - 如果您要使用id,它应该始终是唯一的。记住,每当你想要以“jQuery”方式应用于许多元素的特定行为时 - 这是使用类而不是id的完美案例。一个例子:

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

你会注意到我使用this这是对点击的确切项目的引用!现在您不必担心有许多相同类型的元素!

SEE THE FIDDLE

答案 1 :(得分:1)

您需要的是多个ID和一个用于处理CSS的HTML类。每个元素只能有一个ID,但它可以继承多个类。定义.imgSmall和.imgBig类,使用它们来处理你的CSS,然后使用任何适合你的ID方案进行点击检测。

我会推荐像img1,img1,img2和bigimg1,bigimg2,bigimg3之类的东西,因为这样可以让你在循环中生成所有的html。

答案 2 :(得分:1)

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