I'm trying to set a data-attr dinamically to 12 elements mapped by 12 buttons, so <button data-id="_id01"> will display <div data-id="_id01">,
I'm trying to select the button like
$('.button').data('id').click(function() {
console.log('this is the button' + data.id);
})
the button and the div shall recieve the same data-, so when I click btn 01, it will toggle div01, and so on..
how ecxactly shall I reference this in the jquery?
If you are wanting to know how to use the data-id to match up the elements, you can use them with a finder or a filter.
Below is a small example of how you could match them and show just the related element.
$('button').on('click', function(e){
$('.showMe') //find all the elements to possibly show
.hide() //reset them to be hidden
.filter('[data-id="'+ $(e.target).data('id') +'"]') //find the one that should show
.show(); //show it
});.showMe { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id="_id01">Button 1</button>
<button data-id="_id02">Button 2</button>
<button data-id="_id03">Button 3</button>
<button data-id="_id04">Button 4</button>
<div class="showMe" data-id="_id01">Display 1</div>
<div class="showMe" data-id="_id02">Display 2</div>
<div class="showMe" data-id="_id03">Display 3</div>
<div class="showMe" data-id="_id04">Display 4</div>
data('id')is going to return a String. You cannot call.click()on a string