根据 data-* 属性显示和隐藏元素答案

【问题标题】：show and hide elements based on data-* attribute根据 data-* 属性显示和隐藏元素
【发布时间】：2012-01-27 16:20:26
【问题描述】：

这对于 JQuery 来说似乎应该是微不足道的，但是这个函数隐藏了整个表单......有人能指出我正确的方向吗？

$('form')
        .children()
        .filter(function(){
            return $(this).data('show', 'pro')
        })
        .show();
$('form')
         .children()
         .filter(function(){
             return $(this).data('show', 'home')
         })
         .hide();

【问题讨论】：

标签： jquery show-hide custom-data-attribute

【解决方案1】：

如果数据显示值在您的 HTML 中或设置为每个对象的属性，您可以完全使用选择器来做到这一点：

$('form > [data-show="pro"]').show();
$('form > [data-show="home"]').hide();

解释方式：

form显然选择了表单元素
> 选择表单对象的子对象
[data-show="pro"] 仅选择具有名为data-show 的属性设置为"pro" 值的子项
.show() 调用这些选定对象的 show 方法

如果您的 data-show 值是使用 .data() jquery 方法设置的，因此以前的方法不起作用，那么您最好将 state 设置为类名，而不是您可以更容易使用的数据值一个选择器。如果将这些值设置为类名而不是数据，代码将如下所示：

$('form > .pro').show();
$('form > .home').hide();

请记住，您可以在一个对象上拥有多个类名，并且对象状态直接用于控制对象的呈现方式（CSS 样式、可见性、格式等）以类名表示要好得多而不是 data-xxx 属性，因为在 CSS 或 jQuery 操作的选择器中使用它要容易得多。

【讨论】：

有趣...不过，并非所有人都是直系后代。我会使用 $("form [data-show='foo']").show() 吗？这似乎更有效率。
@ChrisSobolewski - 是的，如果您不只是寻找直系后代（您的原始代码是），那么您可以删除 > 它将包括所有后代，而不仅仅是直系孩子.

【解决方案2】：

您将 2 个参数传递给 data method，从而设置它而不是检索旧值。

改用这个：

$('form')
        .children()
        .filter(function(){
            return $(this).data('show') === 'pro';
        })
        .show();
$('form')
         .children()
         .filter(function(){
             return $(this).data('show') === 'home';
         })
         .hide();

您还可以缓存选择器以提高性能（或使用end）。

【讨论】：

$.data() 在我的过滤器中似乎未定义。此外，您的代码似乎仍然隐藏了整个表单。
暂无我的最后一条评论......我只是拼凑了一个极简主义的小提琴，它正在工作，所以这里发生了其他事情。

【解决方案3】：

不太确定你想从代码中做什么。

要使用 JQ 访问“数据-”，我使用：

$(elementSelector).attr('data-XXX');

其中 data-XXX 是标签的属性。这适用于我见过的所有 IE7 浏览器。

【讨论】：

这只能通过源 html 代码中的 data 属性进行选择。它不会被通过jQuery的data方法添加的数据选择！
根据他们的网站，从 1.4 开始 JQuery .data() 将查看数据属性。