Question

给出以下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']")

Answer 1

缓存元素。

var element = this;

当this处于正确的上下文中时。

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

Answer 2

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

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

Answer 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") );
});

Answer 4

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

这是最好的政策，立即选择一个重要的ID /类元素，以促进他们通过jquery控制，结束基于形式的选择器？

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

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

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

所以，如果你关心的只是jQuery速度，那就是关键。但是，添加ID和类只是为了通过jQuery进行定位，可能会使页面加载时间减慢，而不是相应的选择器性能提升速度。

总结这个过长的答案：

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

Answer 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") ); }); });

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

5 个答案: