在ipod touch上添加/删除类需要三秒钟

Question

我有一个包含各种输入的表单。其中一些输入最初是隐藏的，因为它们具有display:None的父div。

然后我通过jQuery删除隐藏的类。在我的电脑上，以前隐藏的div会立即出现。在iPod Touch上需要整整三秒钟。它有大约100个复选标记输入以及CSS格式。输入也附加到各种事件侦听器。再次隐藏分区同样缓慢（代码没有显示出来。）

有什么建议吗？

的CSS：

.hidden: {display:None}

html（简体）：

<div id = "expand"></div>
<div class = "hidden" id = "city_div">
   some city <input type="checkbox">
   ...
</div>

脚本：

$("[id = expand]").live('click', function() {
    $("[id = city_div]").removeClass("hidden");
});

编辑：我最初写的是iPhone，但它是iPod Touch。纠正了它。

Answer 1

替换

$("[id = expand]").live('click', function() {
    $("[id = city_div]").removeClass("hidden");
});

与

$("#expand").live('click', function() {
    $("#city_div").removeClass("hidden");
});

应该快得多。你的选择器正在寻找所有元素而不是让jQuery简单地调用document.getElementById。

如果在绑定处理程序时存在#expand元素，请使用

$("#expand").on('click', function() {
    $("#city_div").removeClass("hidden");
});

顺便说一句，请务必使用最新版本的jQuery。

---

编辑：如果您有多个具有给定ID的元素，更改它！它无效，会导致错误并阻止优化。使用类和$('.classname')，因为它允许jQuery使用本机和快速getElementsByClassName函数。

Answer 2

我想知道如果访问隐藏的父级会导致性能提升吗？

$(".your-new-class").live('click', function() {
    $(this).parent().removeClass("hidden");
});

这假设隐藏的项目是可点击儿童的直接父母。