도움말

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를/아이콘 - 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> 

자바 스크립트 : 나는 add_to_shortlist 및 remove_from_shortlist에 두 번째 인수를 추가했습니다,하지만이 만든

Live example

주

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

옵션. 이미 링크가있는 경우 링크를 찾는 것을 피할 수 있기 때문입니다. 그러나 두 번째 인수를 제공하지 않는 코드의 다른 부분에서이를 호출하는 경우이를 찾아야합니다. 위 코드는 img 요소를 대체하지만 필요한 경우 img 요소를 보존하기 위해 기본 답변의 예제 # 2 코드를 쉽게 바꿀 수 있습니다.