jQuery通過更改屬性更改元素的預定義樣式在IE中不起作用

Question

我的CSS中有一些基於elements屬性的預定義樣式。 如果我將屬性的值更新為也具有預定義樣式的新內容，則該樣式將應用於FF和Chrome，但不會應用於IE。 請參閱示例，然后在輸入字段中鍵入。

JS：

$('input').on('keypress', function(){
    var l = parseInt($(this).attr('level'), 10) + 1;
    $(this).attr('level', l);
});

CSS：

input[level="0"]{background:red;}
input[level="1"]{background:blue;}
input[level="2"]{background:green;}
input[level="3"]{background:black;}

http://jsfiddle.net/ce6S4/

任何幫助表示贊賞，謝謝。

編輯：與IE 9一起使用，但不<= 8

Answer 1

這是一個IE錯誤。 請注意，調整窗口大小時，元素將正確呈現。

通過設置類名稱來觸發重排：

this.className = this.className; // Or .addClass(' ');

演示： http ： //jsfiddle.net/ce6S4/6/

$('input').on('keypress', function(){
    var l = parseInt($(this).attr('level'), 10) + 1;
    $(this).attr('level', l).addClass(' ');
});

Answer 2

http://jsfiddle.net/ce6S4/3/

嘗試這個

   $('input').on('keydown', function(){
         var l = parseInt($(this).attr('level'), 10) + 1;
    alert(l); //can be removed.
         $(this).attr('level', l.toString()).hide().show().focus();

});​