我正在为我公司的网站创建一个传记页面，我希望它能够与员工一起格式化。个人资料图片然后可以点击每张图片，这会将屏幕淡化为灰色，并且还会显示所点击的人员个人资料的叠加层。然而，我的代码的问题在于它使用了每个人的名字进行硬编码。如何在不使用＆＃34; person1＆＃34;，＆＃34; person2＆＃34;等的情况下让它工作，并且只需使用＆＃34; person＆＃34;相反（或者如果你们知道如何更好的方式）？
<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>
答案 0 :(得分：0)
在元素上使用相同的三个类值，并使用DOM遍历来定位单击函数中的相应值。无需数据属性，额外类或任何其他复杂功能。
http://jsfiddle.net/isherwood/a5hof5g1/
$('.show').click(function () {
$(this).siblings('.person, .fade').show('fast');
});
<img class="show" ... />
<div class="fade"> ... </div>
<div class="person"> ... </div>
但是，您可能并不需要为每个实例提供淡入淡出元素。将一个放在靠近页面末尾的位置，然后通过ID调用它。
另外，我发现对JS使用单引号（撇号）和HTML使用双引号是一种好习惯。您不会无意中删除字符串，并且在大多数情况下您不需要转义字符。
答案 1 :(得分：0)
你想要做的是给每个“show”div一个.show类，并给它一个负责显示的人的数据属性。
HTML
<div class="show" data-person="person1">Show</div>
JS
$('.show').click(function(e) {
var person = $(this).data('person');
$('#' + person).show();
}
重复此操作以关闭。
答案 2 :(得分：0)
向img或单击的元素添加数据属性，然后提取该信息并将其放入叠加层中。这样你就可以动态地做到这一点
<img src='imagen.jpg' class='person1' data-person-name="Mario Fernandez"/>
<script>
$(document).ready(function(){
$(".person1").click(function(e){
$('#overlay').show("fast");
$('#overlay .name').html($(e.target).data('name'));
});
</script>
答案 3 :(得分：0)
改为使用类和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");
});
});