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

Question

编辑:问题演变成如何优化大规模的CSS更改为700或更多的div.我将离开下面的旧问题来描述我原来的方法.

我有以下jQuery但它没有像我期望的那样表现.有大约700个div与类gr,所以隐藏它们需要一个明显的时间.我想做:

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.
   

感谢迈克伦蒂尼,这个问题有一个小问题.

这是我正在处理的整页

我观察到的行为是"显示/隐藏P"需要一个明显的时间来改变,然后它会短暂地改变为"工作",然后它会回到"显示/隐藏".那么jQuery将html()和.toggle()聚合在一起,而不是首先运行html()吗？

这似乎是浏览器特定的,因为在Opera中它做我想要的.在IE 7和Chrome 18中,行为如我所述.有没有办法让Chrome中我想要的行为发生？或者更好的方式来做我描述的事情？

Answer 1

编辑:

不是使用toggle函数来绑定事件,为什么不在所有元素上交换类？这应该是很多快:

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

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

.hidden { display: none !important; }

看一下这个小提琴的例子.

其他编辑:

正如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)
  });
});

现在toggle()是异步的,因为将来通过"预定"10ms setTimeout().这意味着该click()功能几乎可以立即返回,无需等待toggle()完成.

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

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