0

What am i doing wrong? Please see my simplified Fiddle here:

http://jsfiddle.net/a2q815fq/4/

function change() {
  $('#mainmenu3').prop('data-badge','444');
}

Should change the data-badge to "444", but doesn't?!

I think i'm doing something really stupid, but i can't see it!

EDIT: Thanks for the answers. I think, something in the Fiddle does not work, because an simple "alert('test')" does not work?! Should there be a different call to the function "change()"?

EDIT AGAIN: thx, attr() is working, while prop() does not. BUT, if i choose to remove it, removeAttr() should work for it? But doesn't - see here: http://jsfiddle.net/a2q815fq/19/

LAST-EDIT: As SultanBaby mentioned, the selector was not correct. Should be: #mainmenu3 a[data-badge]! THANKS guys, you made my day!

user3395986
  • 25
  • 3
  • Your function isn't being called in the fiddle because of scope problems. Change the menu from "onLoad" to "No wrap". http://jsfiddle.net/barmar/a2q815fq/6/ – Barmar Jan 03 '15 at 15:12
  • The fiddle you linked to should be set to run in `No Wrap - in ` not on `onLoad`. – Sani Huttunen Jan 03 '15 at 15:13
  • Following your EDIT, this is the first comment here done by Barmar: `Your function isn't being called in the fiddle because of scope problems. Change the menu from "onLoad" to "No wrap"` See: http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle – A. Wolff Jan 03 '15 at 15:28

3 Answers3

2

Use .data('badge', 444) or .attr('data-badge', 444)

Horen
  • 11,184
  • 11
  • 71
  • 113
1

I did not see the fiddle before answering, my answer was wrong. Hey, your selector is wrong first of all. The correct selector should be "#mainmenu3 a[data-badge]" and you should use attr like I correctly mentioned before:

$('#mainmenu3 a[data-badge]').attr('data-badge','444');

I also mentioned earlier that data-badge qualifies as a valid attribute but not a property.

Igwe Kalu
  • 14,286
  • 2
  • 29
  • 39
  • `.prop()` works. See http://jsfiddle.net/barmar/a2q815fq/6. jQuery automatically converts as necessary. – Barmar Jan 03 '15 at 15:16
  • @user3395986 Using `.attr()` to update the attribute, not the property because CSS `content: attr(data-badge);` is targeting attribute. EDIT: i see what you meant, because you were wrapping code in `onload` method on jsFiddle, so function wasn't defined on global scope BUT you should read other comments below your own question – A. Wolff Jan 03 '15 at 15:21
  • It looks like more relevant selector indeed: `'#mainmenu3 a[data-badge]'` +1 – A. Wolff Jan 03 '15 at 15:32
  • @user3395986 I changed the menu from "onLoad" to "No wrap". – Barmar Jan 03 '15 at 17:10
0

You want this:

function change() {
  $('#mainmenu3 a').attr('data-badge','444');
}

Because the attribute is of the anchor, not the list item element. Updated fiddle link here.

PS: It also seems to work if I leave out the a part of the selector, however in this case your markup will be flawed, it just happens to look correctly.

meskobalazs
  • 15,741
  • 2
  • 40
  • 63
  • There's nothing in his CSS that says the attribute should be on the anchor. The CSS style is just on `[data-badge]:after`. – Barmar Jan 03 '15 at 15:14