使用jQuery切换大量页面项目很慢

Question

我有一个大的页面元素(大约100),我想用jQuery切换(显示/隐藏).我只是使用$(".toggleElementClass").toggle();这看起来像琐碎的解决方案.

问题是这需要几秒钟,即使在最新的Chrome浏览器上也是如此.是否有更快,更有效的方法来实现相同的效果.

Answer 1

您可以通过利用样式表来锁定单个属性更改的所有显示更改(通常是祖先元素的类名),从而减少浏览器必须完成的工作量.这意味着您可以让它们全部改变而不是一个接一个地改变,从而减少回流次数并提高速度.例如:

<style type="text/css">
    #mything p.toggled { display: none; }
    #mything.toggled p { display: none; }
    #mything.toggled p.toggled { display: block; }
</style>

<div id="mything">
    <p> foo </p>
    <p> bar </p>
    <p> bof </p>
    <p> zot </p>
</div>

<button id="toggle-all">all</button>

<script type="text/javascript">
    $('#mything>p').click(function() {
        $(this).toggleClass('toggled');
    });
    $('#toggle-all').click(function() {
        $('#mything').toggleClass('toggled');
    });
</script>