javascript - 以选择器 ^= 开头的 css 在使用 javascript 更改类后不起作用

Question

将页面加载到浏览器时，一切看起来都很好，背景图像也是正确的。但是，当我单击该图标并且 javascript 将图标的类更改为 .icon-myapp-cow 时，来自 [class^="icon-myapp"] 的 css 将被忽略。仅应用来自 icon-myapp-cow 的 css。在 chrome 和 IE9 中测试

我的CSS

[class^="icon-myapp"] {
    background-image: url("../img/myapp-icons.png");
}

.icon-myapp-horse {
    background-position: -1px -1px;
    height: 15px;
    width: 15px;
}

.icon-myapp-cow {
    background-position: -51px -1px;
    height: 15px;
    width: 15px;
}

我的html

<i class="icon-myapp-horse icon-clickable"></i>

我的javascript

$(".icon-clickable").click(function() {
    $(this).removeClass("icon-myapp-horse");
    $(this).addClass("icon-myapp-cow");

});

Answer 1

您需要将 [class^="icon-myapp"] 更改为:

[class*="icon-myapp"]

参见 here有关更多信息，请在此处获取 fiddle

[attr^=value] Represents an element with an attribute name of attr and whose value is the (sic) prefixed by "value".

[attr*=value] Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.