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

Question

我已经尝试了所有其他选项，但似乎无法解决这个问题。以下是对体验的解释:

访问该页面时，会向此人介绍一些图像(用类标记，例如，其中两个图像被标记为 img01 和 img02)。单击图像时，图像会保持原位(img01 的 z-index 升高)，而所有其他图像会逐渐消失(带有白色填充的 DIV 会淡入并覆盖 img02)，解释该片段的文本也淡入(DIV 标记为 object-text 和 img01 的支持文本淡入)。

虽然我可以使用 img01 功能，但我似乎无法为 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;
}

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

Answer 1

您的代码存在一些问题。您应该为每个 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 而不是手动设置的 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");
});