Question

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

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

Answer 1

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

请改用：

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

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

Answer 2

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

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

作为解释：

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

如果你的数据显示值是用.data() jquery方法设置的，那么之前的方法就不行了，那么你最好将状态设置为类名，而不是你可以更容易的数据值在选择器中使用。如果将这些值设置为类名而不是数据，则代码将如下所示：

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

记住，你可以在一个对象和对象状态上有多个类名，它们直接用于控制对象的表示（CSS样式，可见性，格式等等），它们更好地表示为类名而不是data-xxx属性，因为在CSS或jQuery操作的选择器中使用它更容易。

Answer 3

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

使用JQ访问“data-”，我使用：

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

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

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

3 个答案: