Question

我有两个元素（并排考虑两个按钮）。我动态切换“焦点”类以更改突出显示的效果。然而，有一个怪癖它并不总是重新绘制和/或插入DOM。例如，如果在chrome中我执行console.log，我会看到类更改（我在jquery中使用了removeClass / addClass）。但是如果我转到检查器中的Elements选项卡，它会显示之前的类（实际上，我没有看到重绘反映了类的切换。）

我尝试将父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);

这似乎是一个人必须遇到的特定怪癖（我希望）。如果是这样，我很想知道为什么我的改变没有反映出来。

修改代码发布在这里： 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

不能直接回答您的问题，但您可以使用jQuery's toggleClass function来简化代码。

这是一个使用toggleClass（）和jQuery 1.6和AFAICT的更新版本。

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

使用jquery添加/删除类但不重绘元素以反映

2 个答案: