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

Question

When loading page into browser everything looks fine and the background-image is correct. But when I click on the icon and the javascript changes the class of the icon to .icon-myapp-cow the css from [class^="icon-myapp"] is ignored. Only the css from icon-myapp-cow is applied. Tested in chrome and IE9

My 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;
}

My html

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

My javascript

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

});

Answer 1

You need to change [class^="icon-myapp"] to:

[class*="icon-myapp"]

See here for some more information, and here for a 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.

Answer 2

Change the ^ to *

When you remove the class icon-myapp-horse and then add icon-myapp-cow this newly added class is appended to the class names so the new set of classes look like icon-clickable icon-myapp-cow hence it does not start with icon-myapp

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