Использование jquery для добавления / удаления класса, но элементы не перерисовываются для отражения

Question

У меня есть два элемента (подумайте о двух кнопках рядом). Я динамически переключаю класс «фокус», чтобы изменить выделенный эффект. Тем не менее, есть причуды, которые не всегда перерисовываются и / или вставляются в DOM. Например, если в chrome я делаю console.log, я вижу изменения класса (я использую removeClass / addClass в jquery). Но если я перейду на вкладку «Элементы» в инспекторе, она отображает классы, которые были до этого (и фактически я не вижу перерисовки, отражающей переключение классов.)

Я попытался установить родительский div для отображения none, а затем обратно в block, но это не сработало. Это модальный экран «один раз», поэтому эффективность не имеет значения, поэтому я прибег к такому хаку, где я по сути копирую innerhtml родителя, удаляю и вставляю элемент заново. Ужасный!

       // Not sure why I need this hack. But if I don't, the buttons don't seem to get redrawn 
       var htm  = jQuery(".rdata_container").html(); // copy the  innerhtml
       jQuery(".rdata_container").empty();           // empty and then append back
       jQuery(".rdata_container").append(htm);

Это похоже на особую причуду, с которой, должно быть, кто-то столкнулся (я надеюсь). Если это так, я хотел бы знать, почему мои изменения не отражаются.

EDIT Код размещен здесь: http://jsfiddle.net/roblevintennis/JCZnf/

Answer 1

вы можете использовать setTimeout, когда выполняете другую операцию над элементом, например:

$elm.addClass('hide')
setTimeout(function(){
  $elm.removeCalss('hide')
},0);

Или вы можете заставить перекрасить так:

$elm.addClass('hide')
$elm.scrollTop; // forces a repaint (might be expensive for large amount of items)
$elm.removeCalss('hide');

Эти приемы заставят браузер перерисовать изменение, потому что здесь происходят две вещи, и логика браузера просто объединяет их в одну, что не является желаемым поведением.

Answer 2

Не является прямым ответом на ваш вопрос, но вы можете использовать функцию toggleClass jQuery , чтобы упростить ваш код.

Вот обновленная версия, которая использует toggleClass () и jQuery 1.6, и AFAICT работает отлично.

http://jsfiddle.net/JCZnf/7/