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

我已经尝试了所有其他的选择，但我似乎无法解决这个问题。以下是对这一经历的解释：

当访问该页面时，用户会看到许多图像（使用类标记，例如，其中两个图像被标记为

img01

和

img02

）。单击图像时，图像保持其位置（

img01

的z索引上升），而所有其他图像逐渐消失（带有白色填充的DIV淡入并覆盖

img02

），解释该片段的文本也淡入（带有

img01

支持文本的DIV标记的

对象文本淡入）

虽然我使用了
img01
功能，但我似乎无法对
img02
执行同样的操作。我还计划添加更多的标签（例如
img03
和
img04
），我想知道是否有一种更智能、更有效的方法可以将其结构化

作为功能参考，这里有一个
下面是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>

Javascript

$("#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");
});

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

我看了你的代码更多，似乎你做了很多。确保在编写代码时，永远不要像以前那样重用ID。你的a和DIV都有重复的ID

这并不意味着，但这确实需要很多工作。如果您需要更多帮助，请随时提问。
您的代码存在一些问题。您应该为每个DOM元素使用唯一的ID，并按类名确定图像的目标。我对您的示例做了一些更改，并对其进行了轻微的重组，以向您展示一种更好的方法


将每个图像包装在一个包含标记中，删除重复的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>

已修改事件处理以针对新的包含标记：

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

修改了图像z索引的重置方式：

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

-我被你如何将它简化到那种程度震惊了太棒了！然而，我确实注意到了一个小问题——当点击一个图像时，该类型会在图像的后面和前面短暂停留一秒钟。有没有办法解决这个问题？另外，我怎样才能通过单击图像来淡出
#filler
？谢谢你，你太棒了@Kenself表示，图像后面的类型问题与仅在淡入淡出完成后设置的z索引有关。我假设您的最终设计中不会有文本，使其成为非问题，但这里有更多关于如何修复的信息：。单击图像时淡出填充框相当简单。我已经更新了JSFIDLE:。谢谢您的参考。我想我已经正确地实现了你在帖子中建议的解决方案，但现在它似乎正在发挥作用@肯尼本人没问题，很乐意帮忙。如果这解决了您的问题，请将此标记为已接受的答案。谢谢，你明白了。再次感谢你的帮助。干杯谢谢你的建议！我还是java/css3/html5新手。我从来不知道复制ID从来都不是一个好主意，你是对的，当它只使用一次时，它确实使它变得简单多了。我支持我应该开始训练自己像一个合适的开发者一样思考：）
$("a.img").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass("top");
    $(this).find(".object-text").fadeIn("slow");
    $("#filler").fadeIn("slow");
});

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