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.

Penninite

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

Hypothermia

Do you know by any chance of using .data() instead of .attr('data-<tag>') affects the performance, or is the only performance difference a few characters of code less? Thanks! – Penninite

'.data()' is from jQuery so i guess, it's the way with the best performance to do your stuff, but this doesn't mean '.attr('data-<tag>')' is worse... all in all i think you won't find any performance difference between those two ways ;) – Hypothermia

Answer 2

You can do:

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

Evensong

I just left my computer for a walk, fresh thoughts and thought "if it says, yes it does has an attribute, then I should ask if that data attribute equals a string", just like your piece of code. How easy.. Will report when back if this solves it, although I'm pretty sure. Thanks! – Penninite

@SanderSchaeffer It's usually happens to me as well :P – Evensong

IDK but this is work and the acc answer is wrong for me – Moan

Answer 3

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

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

Pervasive

Do you know by any chance of using .data() instead of .attr('data-<tag>') affects the performance, or is the only performance difference a few characters of code less? Thanks! – Penninite

It doesn't really matter. See this question! #9784098 – Pervasive

Answer 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
}

Albertson

Just like I wrote @Felix, I just left my computer for a walk, fresh thoughts and thought "if it says, yes it does has an attribute, then I should ask if that data attribute equals a string", just like your piece of code =) Thanks! – Penninite