0

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

5 回答 5

1

缓存元素。 

var element = this;

什么时候this在正确的上下文中。

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

于 2012-05-29T17:57:46.210 回答
1

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

var input = $("input[type='checkbox']"),
    table = $("fieldset table");
于 2012-05-29T17:58:04.413 回答
1 
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") );
});
于 2012-05-29T17:59:30.793 回答
1

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

最好的策略是立即为重要元素选择一个 id/类，以便通过 jquery 控制它们，而不是基于表单的选择器？

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

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

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

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

总结这个过长的答案：

  • 尽可能缓存 jQuery 选择器的结果
  • 尽可能使用 ids 和 classes，但是
  • 不要添加不必要的 id 和类，除非测试证明它们是必要的
于 2012-05-29T18:41:18.187 回答
0

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

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

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

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") );
    });
});
于 2012-05-29T21:51:03.780 回答