Check if data attribute value equals a string

Question

I have an element that has a my custom attribute on a <button class="navbar-toggle"> element called data-toggle-wmc and I am trying to check whether the attribute value equals a string value called collapse somehow it has not worked so far.

I tried the following

if ($('button.navbar-toggle').attr('data-toggle-wmc') === 'collapse') {
     alert('123yes');
}

I also tried

if ($('button.navbar-toggle').attr('data-toggle-wmc') == 'collapse') {
     alert('123yes');
}

I looked at this question but somehow the condition is not being fullfilled.

You're missing a `'` - `.attr('data-toggle-wmc')`. Also, use `data('toggle-wmc') == 'collpase'` instead — Rory McCrossan, Oct 20 '17 at 12:20
I don't know if its a typo but you are missing a ` ' ` after `data-toggle-wmc)` — VTodorov, Oct 20 '17 at 12:21
It is only a typo on this question, but not on my actual code. — Sanjok Gurung, Oct 20 '17 at 12:23
Do you have only one element for selector `button.navbar-toggle`? — Satpal, Oct 20 '17 at 12:25
In which case your code works fine: https://jsfiddle.net/f53o5dwL/. This means either you have multiple `button.navbar-toggle` elements, the element doesn't have the attribute - hence my suggestion above to use `data()` as it may be added to jQuery's cache, not the DOM, or there is an error elsewhere in your code and you need to check the console to see it. In any of the above cases we need to see more of your HTML and JS code in order to help you effectively. — Rory McCrossan, Oct 20 '17 at 12:26
@RoryMcCrossan, Possibly there are multiple element, so `$('button.navbar-toggle').attr('data-toggle-wmc')` will return value of first element that might be the reason of not working as desired by OP — Satpal, Oct 20 '17 at 12:27

score 3 · Accepted Answer · answered Oct 20 '17 at 12:24

3

Try:

if ($('button.navbar-toggle').data('toggle-wmc') === 'collapse') ...

answered Oct 20 '17 at 12:24

Lorenzo Marcon

8,029
5
38
63

Thank you. Unfortunately it didn't work, but `console.log($('button.navbar-toggle').data('toggle-wmc'))` does print out the attribute value. – Sanjok Gurung Oct 20 '17 at 12:27
1

as also other pointed out (with examples) the code works, so probably there's something else in your code that shomehow interferes with that. for example another button with classe `.navbar-toggle` in the page. What if you put the console.log _just before_ the if? does it still print the value correctly or not? – Lorenzo Marcon Oct 20 '17 at 12:30
Yep @LorenzoMarcon is right. Here's a jsfiddle demonstrating that it works: https://jsfiddle.net/dun6qvn0/ – Nick Parsons Oct 20 '17 at 12:41
Thank you this method works. I will mark this as the answer – Sanjok Gurung Oct 20 '17 at 13:50

score 1 · Answer 2 · answered Oct 20 '17 at 12:25

Access data properties with $.data. it seems to work like this

$("button.navbar-toggle").on("click", function(){
  if($(this).data("toggle-wmc") === "collapse"){
    console.log($(this).data("toggle-wmc"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggle" data-toggle-wmc="collapse"  width="100" height="50">button</button>

score 0 · Answer 3 · answered Oct 20 '17 at 12:29

0

There was an argument error in your code. Try this

if ($('button.navbar-toggle').attr('data-toggle-wmc') == 'collapse') {
    alert('123yes');
  }

answered Oct 20 '17 at 12:29

Abhishek Mishra

192
1
7

Check if data attribute value equals a string

3 Answers3

Linked