How to get value of data attribute with jquery

Question

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.

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

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/

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

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

sample.click(function() {

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

});

madalinivascu · Accepted Answer · 2015-12-07 18:15:44Z

4

try:

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

http://jsfiddle.net/4Lor0md5/

answered Dec 7, 2015 at 18:15

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

breezy Over a year ago

thanks! what if the anchor tag is outside - for example ` jsfiddle.net/breezy/ca2175cz how can i make it work this way? @madalin ivascu

Rick Hitchcock Over a year ago

jsfiddle.net/ca2175cz/2 seems cleanest. Note that e.preventDefault() shouldn't be needed since the anchor is "#".

breezy Over a year ago

awesome!! thanks man. [data-table] works like a charm and easy to understand. thanks @RickHitchcock @madalin ivascu

csum · Accepted Answer · 2015-12-07 18:14:22Z

0

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

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

sample.click(function() {

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

});

answered Dec 7, 2015 at 18:14

csum

2,04715 silver badges16 bronze badges

Comments

Manish Shukla · Accepted Answer · 2015-12-07 18:30:13Z

0

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

<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.

answered Dec 7, 2015 at 18:30

Manish Shukla

1,3652 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to get value of data attribute with jquery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related