Help with jQuery element selection
I have a list of links as follows:
<li>
<a onclick="add_to_shortlist('225')" href="javascript:void(0);" id="link_225">
<i开发者_开发知识库mg src="images/icon-add.png">Add</a>
</li>
<li>
<a onclick="add_to_shortlist('226')" href="javascript:void(0);" id="link_226">
<img src="images/icon-add.png">Add</a>
</li>
I'd like to change the text "Add" to "Remove" - and the image src from "images/icon-add.png" to "images/icon-remove.png"
How can I do this?
I know I can select the link clicked using:
$('#link_' + song_id)
and use this to change the image
$(".img").attr("src").replace("images/icon-add.png", "images/icon-remove.png");
But am unsure how to proceed.
If you don't have any event handlers on the image itself, you can do this:
$('#link_' + song_id).html(
'<img src="images/icon-remove.png">Remove</a>'
);
Live example
That replaces the content of the link with the updated img
tag and text. The reason I mentioned not having event handlers on the image is that since this replaces the img
element, any handlers on the old element are not assigned to the new element.
If you need to preserve the old image and just change its src
, you can use detach
:
var link = $('#link_' + song_id),
img = link.find('img');
img.detach();
img.attr("src", "images/icon-remove.png");
link.html("Remove");
link.prepend(img);
Live example
detach
takes an element out of the DOM but without removing any event handlers. Then we change the src
, update the text in the link, and re-insert the same img
element rather than replacing it.
Rather than using onclick=
to assign an event handler and changing the handler when you change what it means, I'd use modern ways of assigning the handler and then have the handler figure out what needs to be done. Something like this:
HTML:
<a id="link_255"><img src="images/icon-add.png">Add</a>
JavaScript:
jQuery(function($) {
$('a[id^=link]').click(function(event) {
var link = $(this),
song_id = this.id.substring(5); // Drop the "link_" part
if (link.text() == "Add") {
add_to_shortlist(song_id, link);
}
else {
remove_from_shortlist(song_id, link);
}
return false; // Prevent the link from being followed
});
});
function add_to_shortlist(song_id, link) {
if (!link) {
link = $('#link_' + song_id);
}
// ...add the song...
// Update link
link.html('<img src="images/icon-remove.png">Remove');
}
function remove_from_shortlist(song_id, link) {
if (!link) {
link = $('#link_' + song_id);
}
// ...remove the song...
// Update link
link.html('<img src="images/icon-add.png">Add');
}
Live example
Note that I've added a second argument to add_to_shortlist
and remove_from_shortlist
, but I've made it optional. That's because we can avoid looking up the link if we already have it, but if you're calling this from another part of your code that won't provide the second argument, we'd want to look it up. The above replaces the img
element, but it's easy enough to swap in the code from example #2 in the main answer to preserve the img
element if you need to.
精彩评论