jQuery添加类的意外行为

Question

两个小提琴的故事(请在jsfiddle页面加载后使用运行按钮以更清楚地了解发生的事情).

第一小提琴

死简单:

$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));

有了这个css:

.noScroll {
    background-color: pink;
    position: fixed;
    width: 100%;
    top: 200px;
}

我们上课了.该类被添加到body中,改变了body的外观/行为.该类将从正文中删除,并且正文将恢复为默认值.按预期工作.

第二小提琴

$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$(".noScroll").css({
    "background-color" : "pink",
    "position"  : "fixed",
    "width"     : "100%",
    "top"       : "200px"
});
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));

这次没有附带的CSS,因为它是由jQuery添加的,但在其他方面非常类似于上面.努力到位.CSS已应用,但未删除.为什么会这样？

谢谢!

Answer 1

对于第二个小提琴,当您在noScroll选择器上调用css()时,它会将这些样式内联应用于带有类的元素noScroll.但是,这些样式不会以命名的css样式保留.

所以代码实际上正在运行.它正在添加一个类noScroll,但没有样式与css中的该类相关联.此外,它正在删除该类,但css()调用中的样式保留,因为它们是内联应用的.

为了获得更好的想法,请看这个小提琴,最后手动删除内联样式.