I have the following HTML code:
<a class="toggle" href="#toggle">
<img src="app/css/images/tock.png" alt="No" data-id="4" data-block="1">
</a>
I want to update the value of the src and data-block attributes using jQuery. How do I do this?
Update: As I have many image elements, I want to update the value of a specific image by using data-id.
$('.toggle img').data('block', 'something');
$('.toggle img').attr('src', 'something.jpg');
Use jQuery.data and jQuery.attr.
I'm showing them to you separately for the sake of understanding.
$('toggle img[data-id="4"]')
.attr and not .data. This is confusing because jQuery is able to attach data to the element, but that might not be reflected in the dom if the data-attribute already existed.
data is used to access a "data store" that jQuery adds to DOM elements. You can use it to store any data you like on any node in your DOM. The tricky bit is that this data store gets its initial values from the data attribute on the DOM node. So, you can read the data attributes using data(), but if you write to data() you're only writing to the data store, not to the original attributes.$('.toggle img').each(function(index) {
if($(this).attr('data-id') == '4')
{
$(this).attr('data-block', 'something');
$(this).attr('src', 'something.jpg');
}
});
or
$('.toggle img[data-id="4"]').attr('data-block', 'something');
$('.toggle img[data-id="4"]').attr('src', 'something.jpg');
I want to change the width and height of a div. data attributes did not change it. Instead I use:
var size = $("#theme_photo_size").val().split("x"); // text input like value: 640x480
$("#imageupload_img").width(size[0]);
$("#imageupload_img").attr("data-width", size[0]);
$("#imageupload_img").height(size[1]);
$("#imageupload_img").attr("data-height", size[1]);
be careful:
$("#imageupload_img").data("height", size[1]); //did not work
did not set it
$("#imageupload_img").attr("data-height", size[1]); // yes it worked!
this has set it.
$('.toggle img').data('block', 'something').attr('src', 'something.jpg');
