我正在为我公司的网站创建一个传记页面，我希望将其格式化为员工个人资料图片中的一个。然后可以单击每张图片，这将使屏幕褪色为灰色，并在被点击的人的个人资料上显示一个覆盖图。但是，我的代码存在的问题是，它使用内的每个人的姓名进行了硬编码。我如何才能在不使用“ person1”，“ person2”等内容的情况下正常工作，而仅使用“ person”（或者，如果你们知道的话，可以使用一些更好的方法）？
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("#showperson1").click(function(){
$('.person1').show("fast");
});
$("#hideperson1").click(function(){
$('.person1').hide("slow");
});
$("#showperson2").click(function(){
$('.person2').show("fast");
});
$("#hideperson2").click(function(){
$('.person2').hide("slow");
});
});
</script>
<style>
#overlay {
display: none; /* ensures it’s invisible until it’s called */
position: fixed; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 50%;
top: 50%;
padding: 25px;
padding-right: 250px;
box-shadow: 0px 0px 40px #222222;
border: 10px gray;
border-radius: 25px;
background: #ffffff;
height: 500px;
width: 500px;
z-index: 100;
margin-top: -275px; /* negative half the size of height */
margin-left: -400px; /* negative half the size of width */
font-family:"Trebuchet MS", Helvetica, sans-serif;
}
#fade {
display: none;
position: fixed;
left: 0%;
top: 0%;
background-color: gray;
-moz-opacity: 0.5;
opacity: .50;
filter: alpha(opacity=50);
width: 100%;
height: 100%;
z-index: 90;
}
</style>
</head>
<body>
<table style="width:600">
<tr align="center">
<td align="center">
<img height="100px" width="100px"
src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg"
id="showperson1"
>
<div class="person1" id="fade"></div>
<div class="person1" align="left" id="overlay">
<img src="http://cdns2.freepik.com/free-photo/close-button-with-rounded-corners_318-9865.jpg"
id="hideperson1"
height="25"
width="25"
style="position:absolute; right:15px; top:15px;"
>
<img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg"
height="175px"
width="175px"
style="position:absolute; right:50px; top:75px;"
>
<a href="vcard.vcf">
<img src="http://www.aianwpr.org/wp-content/uploads/2012/08/vcard_icon.png"
height="30px"
width="30px"
style="position:absolute; right:180px; top:275px;"
>
</a>
<a href="mailto:[email protected]?Subject=Hello%20again" target="_parent">
<img src="http://stsff.org/wp-content/uploads/email-icon.png"
height="30px"
width="30px"
style="position:absolute; right:180px; top:322px;"
>
</a>
<a href="tel:+1-800-123-4567">
<img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Phone-icon.png"
height="30px"
width="30px"
style="position:absolute; right:180px; top:367px;"
>
</a>
<p style="position:absolute; left:625px; top:265px;">
<font size="2">
vCard<br/><br/>
Email<br/><br/>
Phone<br/><br/>
</font>
</p>
<p>
biography for person1
</p>
</div>
<br/><strong>Person1</strong><br/>Person1 Title
</td>
<td align="center">
<img height="100px" width="100px"
src="http://www.firstpersonarts.org/wp-content/uploads/2010/08/Soledad-new-headshot-7-073.jpg"
id="showperson2"
>
<div class="person2" id="fade"></div>
<div class="person2" align="left" id="overlay">
<img src="http://cdns2.freepik.com/free-photo/close-button-with-rounded-corners_318-9865.jpg"
id="hideperson2"
height="25"
width="25"
style="position:absolute; right:15px; top:15px;"
>
<img src="http://www.firstpersonarts.org/wp-content/uploads/2010/08/Soledad-new-headshot-7-073.jpg"
height="175px"
width="175px"
style="position:absolute; right:50px; top:75px;"
>
<a href="vcard.vcf">
<img src="http://www.aianwpr.org/wp-content/uploads/2012/08/vcard_icon.png"
height="30px"
width="30px"
style="position:absolute; right:180px; top:275px;"
>
</a>
<a href="mailto:[email protected]?Subject=Hello%20again" target="_parent">
<img src="http://stsff.org/wp-content/uploads/email-icon.png"
height="30px"
width="30px"
style="position:absolute; right:180px; top:322px;"
>
</a>
<a href="tel:+1-800-123-4567">
<img src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Phone-icon.png"
height="30px"
width="30px"
style="position:absolute; right:180px; top:367px;"
>
</a>
<p style="position:absolute; left:625px; top:265px;">
<font size="2">
vCard<br/><br/>
Email<br/><br/>
Phone<br/><br/>
</font>
</p>
<p>
biography for person2
</p>
</div>
<br/><strong>Person1</strong><br/>Person1 Title
</td>
</tr>
</table>
</body>
</html>
改用类和html结构。
替换为id="show/hideperson#"，class="showperson" and class="hideperson"然后使用jQuery选择基于html结构的元素：
$(document).ready(function () {
$(".showperson").click(function () {
$(this).parent().find('.person').show("fast");
});
$(".hideperson").click(function () {
$(this).parent().parent().find('.person').hide("slow");
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句