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>

我想更改文字＆＃34;添加＆＃34;到＆＃34;删除＆＃34; - 来自＆＃34; images / icon-add.png＆＃34;的图像src;到＆＃34; images / icon-remove.png＆＃34;

我该怎么做？

我知道我可以选择点击的链接：

    $('#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元素。

帮助jQuery元素选择

1 个答案: