I use data attributes extensively for managing data in client side events. Is it possible to assign value dynamically to a data attribute using javascript or jquery?
<li data-class_value="somevalue" class="myclass"></li>
$('.myclass').click(function(){
$(this).data('class_value') = "new value";
});
The above javascript code throws the error:
"Uncaught ReferenceError: Invalid left-hand side in assignment".
Could someone please tell me how this can be achieved?
I believe the other answers to this question would only set the data object on that element within jQuery.
If you need to set the actual HTML data-* attribute, you'd need to use this:
$(this).attr("data-class_value", "new value");
Beware of retrieving HTML5 data-* attributes this way as well, as although you can use the shortcut $(this).data("class_value"); to retrieve them, subsequent retrievals will use the cached value in the jQuery data object.
From the jQuery docs:
The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).
$(this).removeAttr("data-class_value", "new value"); but of course it doesn't work. Any clues?
removeAttr only takes one argument. So it won't set the new value for you. You'd need to use attr instead.attr but no joy$(this).removeData("class_value").removeAttr("data-class_value")You need to do
$(this).data('class_value', "new value");
