帮助使用jQuery元素选择

Question

我有一个链接列表如下：

<li> 
    <a onclick="add_to_shortlist('225')" href="javascript:void(0);" id="link_225"> 
    <img 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> 

我想更改文本“添加”，“删除” - 从“图像的图像的src/icon- add.png“到”images/icon-remove.png“

我该怎么做？

我知道我可以链接单击了使用选择：

$('#link_' + song_id) 

，并以此来改变图像

$(".img").attr("src").replace("images/icon-add.png", "images/icon-remove.png"); 

但我不确定如何进行。

Answer 1

如果没有图像本身的任何事件处理程序，你可以这样做：

$('#link_' + song_id).html(
    '<img src="images/icon-remove.png">Remove</a>' 
); 

Live example

这取代与更新img标签链接的内容和文本。我提到图像上没有事件处理程序的原因是，由于此将替换img元素，因此旧元素上的任何处理程序都未分配给新元素。

如果您需要保留旧的形象，只是改变其src，您可以使用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需要不移除任何情况下出来的DOM的元素，但处理程序。然后我们更改src，更新链接中的文本，并重新插入相同的img元素，而不是替换它。

---

而不是使用onclick=分配事件处理程序和不断变化的处理程序，当你改变意味着什么，我会使用分配处理器的现代方式，然后让处理器弄清楚需要做什么。事情是这样的：

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

请注意，我已经添加了第二个参数add_to_shortlist和remove_from_shortlist，但我做了它是可选的。这是因为如果我们已经拥有它，我们可以避免查找链接，但是如果您从代码的另一部分调用此方法，而不会提供第二个参数，我们希望查找它。上面的代码替换了img元素，但在主要答案中交换示例＃2的代码很容易，以便在需要时保留img元素。