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

时间:2015-12-07 18:11:17

标签: javascript jquery html html5

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

例如data-table="sample11"应隐藏class="sample11"sample14相同的内容以及此页面上的任何其他属性

我正在尝试这样的事情,但这对我不起作用 - 以下是我试图这样做的方式 - 这是我的小提琴http://jsfiddle.net/breezy/xq6epy39/

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

<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

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

sample.click(function() {

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

});

3 个答案:

答案 0 :(得分:4)

尝试:

isset()

http://jsfiddle.net/4Lor0md5/

答案 1 :(得分:0)

您可以使用[]指定属性。使用jquery selectors有几种选择。

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

sample.click(function() {

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

});

答案 2 :(得分:0)

您可以将数据属性与jquery一起使用。我修改了你的代码

<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();
})

代替隐藏,您可以调用隐藏/取消隐藏的切换功能。