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

【问题标题】：css that starts with selector ^= dont work after changing class with javascript以选择器 ^= 开头的 css 在使用 javascript 更改类后不起作用
【发布时间】：2013-12-16 17:54:40
【问题描述】：

当将页面加载到浏览器中时，一切看起来都很好，并且背景图像是正确的。但是，当我单击图标并且 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");

});

【问题讨论】：

看看这个 Stackoverflow 线程，我认为它适合你。 stackoverflow.com/questions/5647618/…

标签： javascript jquery html css css-selectors

【解决方案1】：

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

[class*="icon-myapp"]

更多信息请见here，这里是fiddle

[attr^=值] 表示一个属性名为 attr 的元素，其值为 (sic) prefixed by "value"。

[attr*=value] 表示属性名为 attr 的元素，其值包含至少出现一次字符串“value”为子字符串。

【讨论】：

感谢您的快速回答。你是对的，这会奏效。唯一的问题是我故意使用前缀来防止将 css 应用于“test-icon-myapp-image”或类似的类。

【解决方案2】：

将^ 更改为*

当您删除类 icon-myapp-horse 然后添加 icon-myapp-cow 时，这个新添加的类将附加到类名称中，因此新的类集看起来像 icon-clickable icon-myapp-cow，因此它不以 icon-myapp 开头

http://jsfiddle.net/Pj3d5/1/

【讨论】：

啊哈。这解释了很多。是否可以检查以文本开头的类，而不管该类的位置如何？
我的解决方法是：'[class^="icon-myapp"], [class*="icon-myapp"]'。现在选择器将选择包含以“icon-myapp”开头的类的所有元素
@user2630328 这实际上并没有按照您的预期进行。您发布的工作与使用[class*=icon-myapp] 一样好，其他类[class^=icon-myapp] 不是必需的。