jQuery元素选择帮助

我有一个链接列表如下：

<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>

并使用此更改图像

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

---

但我不确定如何进行

如果映像本身没有任何事件处理程序，可以执行以下操作：

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

detach

将元素从DOM中取出，但不删除任何事件处理程序。然后我们更改

src

，更新链接中的文本，并重新插入相同的

img

元素，而不是替换它

---

我不会使用

onclick=

来分配事件处理程序，并在更改其含义时更改处理程序，而是使用现代方法来分配处理程序，然后让处理程序确定需要做什么。大概是这样的：

HTML:

注意，我在
add_to_shortlist
和
remove_from_shortlist
中添加了第二个参数，但我将其设置为可选。这是因为如果我们已经有了链接，我们可以避免查找它，但是如果您是从代码的另一部分调用它，而该部分不提供第二个参数，那么我们希望查找它。上面替换了
img
元素，但是如果需要，可以很容易地在主答案示例2中的代码中进行交换，以保留
img
元素。
这很好，但我还需要将onclick=“add_to_shortlist（'226'）”更改为onclick=“remove_from_shortlist（'226'）”@西蒙：我建议处理这个问题（事实上，在你连接它的整个过程中），让我发布一个附录。
$('#link_' + song_id).html(
    '<img src="images/icon-remove.png">Remove</a>'
);

var link = $('#link_' + song_id),
    img  = link.find('img');
img.detach();
img.attr("src", "images/icon-remove.png");
link.html("Remove");
link.prepend(img);

<a id="link_255"><img src="images/icon-add.png">Add</a>

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');
}