開始於選擇器的css^=在用javascript更改類後不工作

將頁面加載到瀏覽器時，一切看起來都很好，背景圖像正確。但是當我點擊圖標並且javascript將圖標的類更改爲.icon-myapp-cow時，[class^=「icon-myapp」]中的CSS將被忽略。只有來自icon-myapp-cow的css被應用。經測試，在Chrome和IE9開始於選擇器的css^=在用javascript更改類後不工作

我的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"); 

});

來源

2013-12-16 user2630328

看看這個線程＃1，我認爲它爲你工作。 http://stackoverflow.com/questions/5647618/how-can-i-force-a-cached-css-file-to-be-reloaded-on-a-jsp-ie-not-php – Nadeo

更改^到*

當你刪除類icon-myapp-horse，然後添加icon-myapp-cow這個新添加的類追加到類名，因此新的一組類的樣子icon-clickable icon-myapp-cow因此它不會啓動icon-myapp

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

來源

2013-12-16 09:54:40

啊哈。這解釋了很多。是否可以檢查以文字開頭的課程，而不管課程的位置？ – user2630328

我的解決方法導致：'[class^=「icon-myapp」]，[class * =「icon-myapp」]'。現在選擇器將選擇包含以「icon-myapp」開頭的類的所有元素 – user2630328

@ user2630328這實際上並沒有做你期望的操作。您所發佈的工作與使用'[class * = icon-myapp]'另一個類'[class^= icon-myapp]'一樣好，只是不需要。 –

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

[class*="icon-myapp"]

參見here一些更多的信息，在這裏爲一fiddle

[ATTR^=值] 表示具有的ATTR的屬性名的元素，並且其值是（原文如此）用「value」作爲前綴。

[ATTR * =值]表示具有的ATTR屬性名和，其值包含字符串「值」爲串的至少一次出現的元件。

來源

2013-12-16 09:52:15 SW4

感謝您的快速回答。你是對的，這會起作用。唯一的一點是，我有意使用前綴來防止將css應用於像「test-icon-myapp-image」或simular這樣的類。 – user2630328

開始於選擇器的css^=在用javascript更改類後不工作

回答

相關問題