How to use 'If $(this) has data-attribute'

Question

I'm with a little problem. I've got a few buttons, each with a different data-function="" attribute. I want to execute a little script to check which of the buttons has been clicked.

<a href="#" class="functionButton" data-function="blogFunctionaliteit">Blog</a>
<a href="#" class="functionButton" data-function="offerteFunctionaliteit">Offerte</a>
<a href="#" class="functionButton" data-function="overzichtFunctionaliteit">Offerte</a>

I simply want a script that says

if $(this) has <data-function="blogFunctionaliteit"> { }
if $(this) has <data-function="offerteFunctionaliteit"> { }
if $(this) has <data-function="overzichtFunctionaliteit"> { }
else { // do nothing }

I've tried lots of thing, but everything doesn't seem to be working, including

if ($(this).attr('data-function', 'blogFunctionaliteit') { } - Which results in a yes, always, as it only checks if the object has the first parameter, instead of checking them both.

Thanks in advance for writing the correct jQuery code or could advice me to use something else.

Solution 1

For the short way, try this:

if ($(this).data("function") === 'blogFunctionaliteit') {
    // TODO: enter your code...
} else if ($(this).data("function") === 'offerteFunctionaliteit') {
    // TODO: enter your code...
} else if ($(this).data("function") === 'overzichtFunctionaliteit') {
    // TODO: enter your code...
} else {
    // do nothing
}

Meanwhile I've earned a lot of experience with JavaScript and I have some improvements for my own code suggestion. If anyone is reading this answer I would highly recommend to use the following code:

var self = this;
var $self = $(self);
var dataFunction = $self.attr('data-function');

switch (dataFunction) {
  case 'blogFunctionaliteit':
    // TODO: enter your code...
    break;
  case 'offerteFunctionaliteit':
    // TODO: enter your code...
    break;
  case 'overzichtFunctionaliteit':
    // TODO: enter your code...
    break;
  default:
    // do nothing
    break;
}

But why the hell you should use this? It's a lot more complicated! Well, yes it is, but here's why:

• You should always store this in a variable, because this may not be what you think it is, checkout this link: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/this
• You should call the jQuery functions ($(...)) only once and then store it in a new variable to improve performance. The same for object functions.
• For such cases it's better to use the switch-case construct, checkout this link: Case vs If Else If: Which is more efficient?

Trust me, you will have a less problems with JavaScript if you start writing your code like the second code snippet.

Solution 2

You can do:

if ($(this).attr('data-function') == 'blogFunctionaliteit') { }

Solution 3

jQuery has native data support: https://api.jquery.com/jQuery.data/

$('a').click(function() {
    if($(this).data("function") === "blogFunctionaliteit"){
        alert("You clicked me.");
    };
});

Solution 4

Your mistake is that you are using the function attribute in order to apply some changes to the attribute. Instead of that, i think you want to check if the attribute value is the one you want. So this is what you should do:

if ($(this).attr('data-function') === 'blogFunctionaliteit') {
    //bla bla
}

View more solutions