CODEWITHSUNDEEP
jqueryif-statementcomparisoncustom-data-attribute
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

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

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.

Upvotes: 9

Views: 51053

Answers (4)

ReeCube
ReeCube

Reputation: 2597

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:

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

Upvotes: 22

Furkan Omay
Furkan Omay

Reputation: 1067

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

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

Upvotes: 3

Anastasios Vlasopoulos
Anastasios Vlasopoulos

Reputation: 1802

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
}

Upvotes: 2

Felix
Felix

Reputation: 38102

You can do:

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

Upvotes: 7

Related Questions