Javascript 需要帮助替换html和jquery中的硬代码吗

我正在为我公司的网站创建一个传记页面，我想用一组员工个人资料图片格式化。然后可以单击每张图片，这将使屏幕变为灰色，并显示被单击的人的个人资料的覆盖图。然而，我的代码的问题是，它硬编码了的范围内每个人的名字。我怎么能不在头脑中使用“person1”、“person2”等词，而只用“person”来代替它（或者如果你们知道怎么做的话，用更好的方法）

$（文档）.ready（函数（）{
$（“#showperson1”）。单击（函数（）{
$（'.person1'）.show（“fast”）；
});
$（“#hideperson1”）。单击（函数（）{
$（'.person1'）.hide（“慢”）；
});
$（“#showperson2”）。单击（函数（）{
$（'.person2'）.show（“fast”）；
});
$（“#hideperson2”）。单击（函数（）{
$（'.person2'）.hide（“慢”）；
});
});
#覆盖层{
display:none；/*确保在调用之前它是不可见的*/
位置：固定；/*使div进入浏览器查看区域的绝对位置*/
左：50%；
最高：50%；
填充：25px；
右边填充：250px；
盒影：0px 0px 40px#22222；
边框：10px灰色；
边界半径：25px；
背景：#ffffff；
高度：500px；
宽度：500px；
z指数：100；
边缘顶部：-275px；/*高度大小的负一半*/
左边距：-400px；/*宽度的负一半*/
字体系列：“投石机MS”，Helvetica，无衬线；
}   
#褪色{
显示：无；
位置：固定；
左：0%；
最高：0%；
背景颜色：灰色；
-moz不透明度：0.5；
不透明度：.50；
过滤器：α（不透明度=50）；
宽度：100%；
身高：100%；
z指数：90；
}

vCard


电子邮件


电话




个人传记


人1


vCard


电子邮件


电话




个人传记2


人1

在元素上使用相同的三个类值，并使用DOM遍历以单击函数中的相应值为目标。不需要数据属性、额外的类或任何其他复杂性

$（'.show'）。单击（函数（）{
$（this）.兄弟姐妹（'.person，.fade'）.show（'fast'）；
});
... 
... 

不过，您可能不需要为每个实例使用淡入淡出元素。把一个放在靠近页面末尾的某个地方，按ID调用它

---

另外，我发现在JS中使用单引号（撇号），在HTML中使用双引号是一种很好的做法。您不会无意中截断字符串，并且在大多数情况下不需要转义字符

您要做的是给每个“show”div一个.show类，并给它一个负责显示的人的数据属性

HTML

---

对close也重复此操作。

将数据属性添加到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>

$（文档）.ready（函数（）{
$（“.person1”）。单击（函数（e）{
$（“#叠加”）.show（“快速”）；
$（'#overlay.name'）.html（$（e.target.data（'name'））；
});

改用类和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:

根据定义，类描述了一组相似的元素。如果你增加类，很有可能你错误地使用了它们。Fiddle:你这是什么意思？在。

<div class="show" data-person="person1">Show</div>

$('.show').click(function(e) {
    var person = $(this).data('person');
    $('#' + person).show();
}

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

$(document).ready(function () {
    $(".showperson").click(function () {
        $(this).parent().find('.person').show("fast");
    });
    $(".hideperson").click(function () {
        $(this).parent().parent().find('.person').hide("slow");
    });
});