jquery - 如何替换 CSS/切换大量元素？

Question

编辑:问题变成了如何优化大规模 CSS 更改以达到 700 个或更多 div。我将在下面留下旧问题来描述我最初的方法。

我有以下 jQuery，但它的行为不符合我的预期。大约有 700 个 gr 类的 div，因此隐藏它们需要相当长的时间。我正在尝试做:

1. 点击“显示/隐藏发音”后，立即将该文本更改为“工作中”
2. 等到所有“div.gr”都隐藏/显示

3. “工作”返回“显示/隐藏发音”

   $(document).ready(function () {
    $('#togglePron').click(function() {
      $('#togglePron').html("Working...");
      $('div.gr').toggle();
      $('#togglePron').html("Show/hide Pronunciation");
     });
   });
   ...
   ... 
   <div class="pronlink" id="togglePron">Show/hide P</div>
   
   <div class="gr">hai</div><div class="zi">A</div>
   <div class="gr">nao</div><div class="zi">B</div>  
   etc.
   

感谢迈克·伦蒂尼 there's a jsfiddle for this question.

<强> This is the full page I'm working on

我观察到的行为是“显示/隐藏 P”需要花费明显的时间才能更改，然后短暂更改为“工作”，然后返回“显示/隐藏”。那么 jQuery 是否将 html() 和 .toggle() 捆绑在一起，而不是先运行 html() ？

这似乎是特定于浏览器的，因为在 Opera 中它可以满足我的需求。在 IE 7 和 Chrome 18 中，行为如我所描述。有没有办法让 Chrome 中实现我想要的行为？或者有更好的方法来完成我所描述的事情？

Answer 1

编辑:

为什么不直接在所有元素上交换一个类，而不是使用切换函数来绑定(bind)事件呢？这应该快得多:

$(document).ready(function(){
  $('#toggleP').click(function(){
    $('.gr').toggleClass('hidden');
  });
});

然后在 CSS 中添加以下样式:

.hidden { display: none !important; }

参见this fiddle举个例子。

额外编辑:

正如 kingjeffrey 所指出的，类交换父元素而不是子元素甚至更有效:

JS:
$('#togglePron').click(function(){
  $('table').toggleClass('hide-pron');
});

CSS:
table.hide-pron .gr { display: none !important; }

对于(相对)少数的子类，这些方法之间的差异可以忽略不计 - 但随着子类数量的增加，交换父类可能会明显更快。

<小时/>

原始答案:

在 click() 函数返回之前，您的元素不会更新。这是一种方法(可能不是最佳方法):

$(document).ready(function () {
  $('#toggleP').click(function() {
    $('#toggleP').html("Working...");
    setTimeout(
      "$('div.g').toggle(10,function(){$('#toggleP').html('Show/Hide P');});",
      10)
  });
});

由于通过 setTimeout() “安排”在未来 10 毫秒，toggle() 现在是异步的。这意味着 click() 函数几乎可以立即返回，而无需等待 toggle() 完成。

正如其他人所指出的，最好的选择可能是将所有 div 包装在父级中(如果这对于您的实际代码可行)，然后切换该父级 div.

JSFiddle 链接:http://jsfiddle.net/5E45Q/