jQuery 根据 data-* 属性显示和隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9036559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show and hide elements based on data-* attribute
提问by Chris Sobolewski
This seems like it should be trivial for JQuery to do, but this function is hiding the whole form... can someone point me in the right direction?
这对于 JQuery 来说似乎应该是微不足道的，但是这个函数隐藏了整个表单......有人可以指出我正确的方向吗？
$('form')
.children()
.filter(function(){
return $(this).data('show', 'pro')
})
.show();
$('form')
.children()
.filter(function(){
return $(this).data('show', 'home')
})
.hide();
回答by Joseph Silber
You're passing 2 arguments to the datamethod, thereby setting it instead of retrieving the old value.
您将 2 个参数传递给datamethod，从而设置它而不是检索旧值。
Use this instead:
改用这个：
$('form')
.children()
.filter(function(){
return $(this).data('show') === 'pro';
})
.show();
$('form')
.children()
.filter(function(){
return $(this).data('show') === 'home';
})
.hide();
You could also cache your selector for performance (or use end).
您还可以缓存选择器以提高性能（或使用end）。
回答by jfriend00
If the data-show values are in your HTML or set as attributes on each object, you can do this entirely with a selector:
如果数据显示值在您的 HTML 中或设置为每个对象的属性，您可以完全使用选择器执行此操作：
$('form > [data-show="pro"]').show();
$('form > [data-show="home"]').hide();
By way of explanation:
通过解释：
- The
formobviously selects form elements - The
>selects a child of the form object - The
[data-show="pro"]selects only the children that have an attribute nameddata-showthat is set to the value of"pro" - The
.show()calls the show method on those selected objects
- 的
form明显选择表单元素 - 所述
>选择所述形式对象的子 - 该
[data-show="pro"]只选择具有名为属性的孩子data-show被设置为值"pro" - 该
.show()呼吁那些选定对象的show方法
If your data-show values are set with the .data()jquery method so the previous method would not work, then you may be better off setting state as a class name rather than a data value that you can more easily use in a selector. If these values were set as class names instead of data, the code would look like this:
如果您的数据显示值是使用.data()jquery 方法设置的，因此之前的方法不起作用，那么您最好将状态设置为类名，而不是可以更轻松地在选择器中使用的数据值。如果将这些值设置为类名而不是数据，则代码将如下所示：
$('form > .pro').show();
$('form > .home').hide();
Remember, you can have multiple class names on an object and object state that is directly used to control the presentation of the object (CSS styles, visibility, formatting, etc..) is much, much better to represent as class names rather than data-xxx attributes because it's much easier to use it in selectors for CSS or jQuery operations.
请记住，您可以在一个对象上拥有多个类名，并且直接用于控制对象呈现的对象状态（CSS 样式、可见性、格式等）要好得多，表示为类名而不是数据-xxx 属性，因为在 CSS 或 jQuery 操作的选择器中使用它要容易得多。
回答by circusdei
not quite sure what you're trying to do from code.
不太确定你想从代码中做什么。
to access "data-" with JQ, i use:
要使用 JQ 访问“数据-”，我使用：
$(elementSelector).attr('data-XXX');
where data-XXX is the attribute of the tag. This works in all browsers back to IE7 that i've seen.
其中 data-XXX 是标签的属性。这适用于所有浏览器，回到我见过的 IE7。
