4

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

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

3 回答 3

9

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

改用这个：

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

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

于 2012-01-27T16:22:29.310 回答
7

如果数据显示值在您的 HTML 中或设置为每个对象的属性，您可以完全使用选择器来执行此操作：

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

通过解释：

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

如果您的数据显示值是使用.data()jquery 方法设置的，因此以前的方法不起作用，那么您最好将 state 设置为类名，而不是可以更轻松地在选择器中使用的数据值。如果将这些值设置为类名而不是数据，则代码将如下所示：

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

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

于 2012-01-27T16:33:08.157 回答
0

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

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

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

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

于 2012-01-27T16:22:47.687 回答