我正在为公司网站创建一个传记页面，我希望使用员工的个人资料图片对其进行格式化。然后可以单击每张图片，这将使屏幕淡入灰色，并显示被单击人员的个人资料的覆盖层。然而，我的代码的问题在于，它用 .我怎样才能让它工作而不使用“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:someone@example.com?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:someone@example.com?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"和 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");
});
});
fiddle :http://jsfiddle.net/t53qf1hc/1/
关于javascript - 需要帮助替换 html 和 jquery 中的硬代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25317394/