我想问一下为多个图片重用下面代码的方法: 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();
});
答案 0 :(得分:1)
首先 - 如果您要使用id,它应该始终是唯一的。记住,每当你想要以“jQuery”方式应用于许多元素的特定行为时 - 这是使用类而不是id的完美案例。一个例子:
$(".myClass").click(function(){
$("#imgBig").attr("src", $(this).attr("src"));
$("#overlay").show();
$("#overlayContent").show();
});
你会注意到我使用this
这是对点击的确切项目的引用!现在您不必担心有许多相同类型的元素!
答案 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;
}