基于 id/class 的选择器 v/s 基于表单的选择器答案

【问题标题】：id/class based selector v/s forms based selectors基于 id/class 的选择器 v/s 基于表单的选择器
【发布时间】：2012-05-29 17:52:04
【问题描述】：

给定以下 HTML：

<fieldset>
    <legend>
        <input type="checkbox" name="amazon_activated" /> 
    </legend>
    <table>
        <tr>
            <td>
                Amazon Data
            </td>
        </tr>
    </table>
</fieldset>

下一个代码允许隐藏/显示与复选框相关的数据容器表：

$("input[name='amazon_activated']").click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

下一个代码应该在页面加载后初始化hide/show 状态：

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $(this).parent("legend").next("table").hide();
}

好吧，它失败了。

我已经知道为什么了：this 指的是page 元素，而不是checkbox 元素。

所以我想知道：

这是最好的策略立即选择id/class：

$("#id")

对于重要的元素，以便于通过 jquery 控制它们，而不是基于表单的选择器？：

$("input[name='amazon_activated']")

【问题讨论】：

标签： javascript jquery class selector

【解决方案1】：

缓存元素。

var element = this;

当this 在正确的上下文中时。

您通常为给定的标记编写 Javascript，而不是相反。 ID 和类除了用作选择器之外还有其他意义。

【讨论】：

不，我已经解决了这个问题。不要添加不必要的类或 ID。相反，一旦你找到你想要的元素，将它保存在一个变量中并使用它来代替上下文之外的 this。

【解决方案2】：

我认为您可以将元素缓存在外部函数的顶部。在其他地方使用它们会很方便。此外，缓存元素也将提高性能。你可以这样做：

var input = $("input[type='checkbox']"),
    table = $("fieldset table");

【讨论】：

【解决方案3】：

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $(this).parent("legend").next("table").hide();
}

以上代码中this属于页面元素作用域，其中

$("input[name='amazon_activated']").click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

上面代码中this属于input[name='amazon_activated']的回调范围，指向input[name='amazon_activated']。

所以要激活第一个代码，你应该尝试

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $("input[name='amazon_activated']").parent("legend").next("table").hide();
}

最好将输入的引用保留在变量中并使用它

var checkboxElement = $("input[name='amazon_activated']"); // you can also use id

那么你喜欢这个

if ( ! checkboxElement.is(":checked")){
    checkboxElement.parent("legend").next("table").hide();
}

checkboxElement.click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

【讨论】：

【解决方案4】：

我认为每个答案都告诉您缓存对象的原因是它会非常快。回答具体问题，忽略其余部分，即：

立即为重要的选择一个 id/class 是最好的策略吗？元素为了方便他们通过jquery控制，over 基于表单的选择器？

首先，我会说“属性选择器”而不是“基于表单的选择器”，因为我不相信 jQuery 区分 $('input[name="amazon_activated"]') 和 $('a[href="#"]') 就其搜索方式而言。

也就是说，一般的经验法则是：

id 选择器比类选择器快于属性选择器选择器。

所以，如果您只关心 jQuery 速度，那是关键。然而，仅仅为了通过 jQuery 进行定位而添加 id 和类可能会比相应的选择器性能加速更慢地降低页面加载时间。

总结这个过长的答案：

尽可能缓存 jQuery 选择器的结果
尽可能使用 ID 和类，但是
除非测试证明有必要，否则不要添加不必要的 ID 和类

【讨论】：

【解决方案5】：

感谢大家的回答。所有人都非常有帮助（我给所有人+1）。

我想添加考虑到您的提示的最终解决方案。

确实涉及到多个checkbox 元素，所以我将它们缓存并使用关联数组对其进行迭代（避免添加更多 id/类）。

var checkboxElements = {
    "amazon_activated" : $("input[name='amazon_activated']"),
    "clickbank_activated" : $("input[name='clickbank_activated']"),
    "ebay_activated" : $("input[name='ebay_activated']")
}

$.each(checkboxElements, function(i, el){
    $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    $(el).click(function(){
        $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    });
});

【讨论】：