5

我正在以 MVC 格式（php Codeigniter）呈现超过 600 个表单。这些表单中的每一个都有一个标有“更多选项”的按钮。当您单击此按钮时 - 位于同一父元素中的隐藏 div 被切换，显示更多输入字段和数据。问题是控制台中的兄弟切换很快，但是当我单击实际按钮时，触发需要很长时间。

使用 id 是推荐的解决方法，但是当我有这么多 div 元素要通过时，它有点不切实际。

这是我的js文件

jQuery(document.ready(function(){
    jQuery("form >button[name='more_data'].meta_button").click( function(){  
        jQuery(this).siblings("div.meta").toggle("fast");
    });
});

这是结构（这些 div 有 650 个，以后还会有更多）

<div>
    <li id="bCIya8DZyr4idseJe5cbLA" class="even">
        <form action="url" method="post" accept-charset="utf-8">
            <div class="space_name"></div>
            <button name="more_data" type="button" class="meta_button">More Options</button>
            <input type="submit" name="Submit" value="Submit">
            <div class="meta" style="overflow: hidden; display: block;">
                <div class="meta_block">Set Estimates:
                    <div class="input_estimate">1:
                        <input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
                    </div>
                    <div class="input_estimate">2:
                        <input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
                    </div>
                    <div class="input_estimate">3:
                        <input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
                    </div>
                </div>
            </div>
        </form>
    </li>
</div>

注意：我正在运行 jQuery 1.7.2

4

2 回答 2

3

不要使用委托

当您有多个事件侦听器时，使用像@jrummell 建议的委托（.on()带有选择器）会更快，因为您将侦听器的数量减少到一个。

使用类的更简单的选择器

所以在这种情况下，虽然我建议使用更简单的选择器：

$(function(){
    $('.meta_button').on('click', function(){
        $(this).siblings('div.meta').toggle('fast');
    });
});

这样一来，当点击被触发时，您的选择器就会变得非常简单，并且检查更少，因为没有委托。此外，不会捕获对表单中其他元素的点击。

动画减慢速度

动画可以减慢速度。在多个元素上同时执行的动画甚至更多。

尝试移动div.meta单个父元素中的所有元素并仅在该单个元素上应用动画。

您也可以通过使用完全删除动画toggle()（在这种情况下，关于多个项目的注释仍然有效）。

示例：

$(function(){
    $('.meta_button').on('click', function(){
        $(this).parent().find('.meta_holder').toggle();
        // OR
        // $(this).next('.meta_holder').toggle();
    });
});
于 2013-03-21T20:02:48.400 回答
0

包括 jQuery.ui.css 使重新显示变得异常缓慢。昂贵的 CSS 规则会扼杀显示并减慢渲染时间。“朝着正确的方向轻推”在问题的评论中。

于 2013-03-21T20:12:12.100 回答