如何使用jquery获取data属性的值

I want to be able to grab html5 attribute values and have them match the value and attribute name with the class - then hide on click.

我希望能够获取html5属性值，并让它们将值和属性名称与类匹配 - 然后单击隐藏。

for example data-table="sample11" should hide class="sample11" same for sample14 and any other attributes on this page

例如，data-table =“sample11”应该为sample14和此页面上的任何其他属性隐藏class =“sample11”

I was trying something like this but it isn't working for me - below is the way i am trying to do this - here is my fiddle http://jsfiddle.net/breezy/xq6epy39/

我正在尝试这样的东西，但它不适合我 - 下面是我试图这样做的方式 - 这是我的小提琴http://jsfiddle.net/breezy/xq6epy39/

Any help or guidance would be helpful. Thanks!

任何帮助或指导都会有所帮助。谢谢！

<div data-table="sample11">
  <a href="#">when i click this 'hide this' in sample11 should hide</a>
</div>

<div class="sample11">

  hide this
</div>


<div data-table="sample14">
   <a href="#">when i click this 'hide this' in sample14 should hide</a>
</div>

<div class="sample14">

  hide this
</div>

jQuery

jQuery的

var sample = $('div').data("table") === "11";

sample.click(function() {

  $('.sample11').hide();

});

3 个解决方案

#1

try:

尝试：

$('div a').click(function(e) {
  e.preventDefault();
  $('.' + $(this).parent().attr('data-table')).toggle();//hide()//slideToggle()//fadeToggle()
});

http://jsfiddle.net/4Lor0md5/

#2

You can specify attributes using []. There are several options using jquery selectors.

您可以使用[]指定属性。使用jquery选择器有几个选项。

var sample = $('div[data-table="11"]');

sample.click(function() {

  $('.sample11').hide();

});

#3

you can use data attribute with jquery. I have modified your code

你可以使用jquery的data属性。我修改了你的代码

<div>
   <a href="#" class="clickme" data-table=".sample14">when i click this 'hide this' in sample14 should hide</a>
</div>

<div class="sample14">

  hide this
</div>

$(".clickme").click(function(){
  alert($(this).data("table"));
  $($(this).data("table")).hide();
})

in place of hide you can call toggle function for hide/unhide.

代替隐藏，您可以调用切换功能进行隐藏/取消隐藏。

#1