我正在以MVC格式渲染超过600个表单(PHP Codeigniter).这些表单中的每一个都有一个标有“更多选项”的按钮.单击此按钮时 – 将切换位于同一父元素中的隐藏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
解决方法
不要使用代表
当你有多个事件监听器时,使用像@jrummell建议的委托(.on()和@jrummell建议更快,因为你将监听器的数量减少到一个.
使用类更简单的选择器
所以在这种情况下我会建议使用更简单的选择器：
$(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();
});
});
