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 ^ =值]   表示属性名称为attr且其值为（sic）前缀的值为“value”的元素。

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

Answer 2

将^更改为*

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

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

从选择器开始的css ^ =在用javascript更改类后不起作用

2 个答案: