jQuery нажмите изменить класс IE странность

Question

Возможно, я пытаюсь слишком полюбить это.

У меня есть пара радиоподобных кнопок подряд с разделителем между ними с фоновыми изображениями. Когда нажата одна из «кнопок», я меняю ее класс. CSS для разделителя привязан к классам кнопок с обеих сторон, чтобы выбрать фоновое изображение. Я делаю это с помощью «родственных» селекторов CSS.

У меня есть события jQuery .click, связанные с «кнопками». первое, что они делают, это очищают «выбранный» класс от другой кнопки и устанавливают его на нажатой кнопке.

Например, если кнопка LEFT class = 'selected', а кнопка RIGHT - нет, разделитель между ними получит синий фон. Нажмите на кнопку ВПРАВО, и она получит class = 'selected', пока очищается класс кнопки LEFT. Делитель становится красным.

Это работает в IE, FF, Safari и т. Д. Но IE странный (IE7) - он будет отражать изменение фона делителя только тогда, когда я ВЫКЛЮЧУ кнопку мыши, которую нажала! То есть, в примере, кнопка ВПРАВО получает class = 'selected' и немедленно изменяется при нажатии. Но разделитель остается синим, пока я не выключу мышь, а затем он станет красным.

Сам класс меняется, и в результате изменяется внешний вид кнопки. Это не только соседние вещи, которые не!?

Это напоминает мне о моих старых днях VB6, когда вам приходилось периодически вызывать DoEvents, чтобы заставить Windows вносить изменения в пользовательский интерфейс. Может ли быть что-то подобное здесь для IE?

Answer 1

Я читал, что использование setAttribute для изменения класса заставит IE7 перерисовать стили.Попробуйте, и если это все еще не помогает, я решил аналогичную проблему IE7, переписав html, что заставило IE7 перерисовать (используя jquery):

if ($("html").hasClass("ie7")){
    var tempHolder = $("#ajaxresults").html();
    $("#ajaxresults").html(tempHolder);
}

Что касается предоставления html или телаотметьте класс ie7, я рекомендую взглянуть на html5boilerplate.com.Если по какой-то причине вы не можете использовать их решение, jquery для этого:

    if ($.browser.msie){
        if ($.browser.version < 8){
            $("html").addClass("ie ie7");
        }
        else {
            $("html").addClass("ie");
        }
    }

Answer 2

Я понятия не имею, почему это помогает, но добавление .hide (). Show () к селектору, который включает в себя материал, который изменил класс, кажется, заставляет его обновляться.