Javascript 淡入淡出不工作

Question

我正在使用一些 javascript 来淡入页面顶部的几个消息栏 - 有点像 stackoverflow 做的:)

我有:

<div id='message' style="display: none;">
    <span>Wow, that was quick! - below is a preview of your page.</span>
    <a href="#" class="close-notify">X</a>
</div>
<div id='message' style="display: none;">
    <span>Try posting something interesting</span>
    <a href="#" class="close-notify">X</a>
</div>

CSS:

#message {height:30px;width:100%;z-index:105;text-align:center;color:white;padding:10px 0px 10px 0px;background-color:#8E1609;}
#message span {text-align: center;width: 95%;float:left;}
.close-notify {white-space: nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}
.close-notify a {color: #fff;}

和Javascript:

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

但不幸的是，只有第一条消息显示。怎么会？当然第二个也应该显示吗？

谢谢

Answer 1

id 属性在页面的所有元素中应该是唯一的。将 HTML、CSS 和 JavaScript 更改为使用 class="message" 而不是 id="message"，它将正常工作。

从技术上讲，这里发生的是 jQuery 看到 #message 选择器并尝试使用 document.getElementById(这是最快的)找到元素。此函数仅返回一个元素，在本例中为第一个元素。所以第二个永远没有机会被处理。

您还有一个错误:按照现在的代码，点击“关闭”链接将使所有 消息消失。您需要稍微调整 click 处理程序，使其按预期运行。

See all of this in action here .