已为单个图像创建了点击效果，但希望其他图像具有相同的效果

Question

我正在尝试其他所有选项，但似乎无法解决此问题。 以下是对体验的解释：

当访问该页面时，该人会看到许多图像（带有类标记，例如，其中两个图像标记为img01和img02 ）。 单击图像后，图像将保持其位置（ img01的z索引已升高），而所有其他图像均消失（带有白色填充的DIV逐渐img02并覆盖img02 ），并且说明该片段的文本img02逐渐消失也是如此（带有img01的支持文本的DIV标记object-text文本逐渐淡出）。

当我使img01功能正常工作时，我似乎无法对img02做同样的img02 。 我还计划添加更多标签（例如img03和img04 ），并且想知道是否可以使用一种更智能，更有效的方式来构造它。

对于功能参考，这是http://jsfiddle.net/kenhimself/nvwzgus0/4/，下面是html，css和java代码。

提前致谢！

html

<a href="#" id="object" class="img01"> <img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="object-text" class="img01">
    <h1>img01 Text<br/>img01 Text</h1>
</div>

<a href="#" id="object" class="img02"> <img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="object-text" class="img02">
    <h1>img02 Text<br/>img02 Text</h1>
</div>

<div id="filler"></div>

的CSS

html, body {
    width:100%;
    height:100%;
}
#object {
    top: 100px;
    left:100px;
}
#object-text {
    display:none;
    z-index:100000;
    bottom: 0;
    left: 0;
}
#filler {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    background-color: white;
    z-index:1000;
    opacity: 0.8;
}
h1 {
    font-size:20px;
    font-family: sans-serif;
    font-weight: 100;
    font-style: normal;
    color: red;
}

.img01, .img02 {
    position:absolute;
}
.img01 img, .img02 img {
    width:200px;
    height:auto;
}
.img01 {
    top: 20px;
    left: 20px;
}
.img02 {
    top: 20px;
    right: 20px;
}

Java脚本

$("#object").click(function (e) {
    e.stopPropagation();
});

$("#object").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $("#object").css("z-index", "2000");
    $("#object-text").fadeIn("slow");
    $("#filler").fadeIn("slow");
    $("#inner").css("z-index", "2000");
});

$(document).click(function () {
    $("#filler").fadeOut("slow");
    $("#object-text").fadeOut("slow");
});

Answer 1

我在这里看到的主要问题是您有两个具有相同ID的对象。 更改此设置，您的代码应该可以正常工作。 我建议将您具有的id（对象）的内容切换为类，并将您具有的类（img02和img01）的内容切换为id。

我仔细检查了您的代码，看来您正在做很多事情。 确保在编写代码时从未像以往一样重复使用id。 您的a和您的div都有重复的ID。

并不是说，但这确实需要大量工作。 如果您需要更多帮助，请随时提出任何问题。

Answer 2

您的代码存在一些问题。 您应该为每个DOM元素使用唯一的ID，并按类名定位图像。 我对您的示例进行了一些更改，并对其进行了稍微的重组，以向您展示一种更好的方法。

http://jsfiddle.net/nvwzgus0/6/

将每个图像包装在一个包含标签中，删除重复的ID，并改用类名

<a href="#" class="img img01">
    <img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
    <div class="object-text">
        <h1>img01 Text<br/>img01 Text</h1>
    </div>
</a>

<a href="#" class="img img02">
    <img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
    <div class="object-text">
        <h1>img02 Text<br/>img02 Text</h1>
    </div>
</a>

<div id="filler"></div>

添加了用于更改z-index而不是手动设置z-index的CSS类，以便更轻松地打开和关闭。

a.top {
    z-index: 2000;
}

修改了事件处理以定位新的包含标签：

$("a.img").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass("top");
    $(this).find(".object-text").fadeIn("slow");
    $("#filler").fadeIn("slow");
});

修改了图像z-index的重置方式：

$(document).click(function () {
    $("#filler").fadeOut("slow", function() {
        $("a.img").removeClass("top");
    });
    $(".object-text").fadeOut("slow");
});