幫助使用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元素。