전체가 아닌 하나의 요소 만 교체하십시오.

Question

여기에 글을 게시하기 전에 직접 해 보았습니다 만,이 시점에서 벽에 부딪혔습니다.

내가 제품의 목록을 가지고, 각 제품은 '장바구니에 담기'버튼/이미지를 가지고 있으며, 그 이미지가 이미지 '장바구니에 추가 항목'을 함께 교체해야합니다.

내가 가진 문제는 하나의 이미지를 바꿀 때 모든 이미지가 대체된다는 것입니다. 이제 jQuery의 새로운 기능을 알 수 있습니다. 여기

//Replace the 'Add To Cart' button 
$('.add-to-cart-btn').click(function(){ 
    $('.add-to-cart-btn').replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart">'); 
return false; 
}); 

내 HTML입니다 :

이

내 jQuery를 당신이 항목이 추가 될 때, 나는 돈 때문에, 나는 '전체 AHREF 요소를 교체하고 있습니다 볼 수 있듯이

<a href="#" class="add-to-cart-btn"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a> 

버튼을 다시 클릭 할 수있게하려고합니다.

'장바구니에 추가'버튼/이미지를 어떻게 바꾸는 것이 좋을까요?

도움과 도움을 주셔서 감사합니다.

Answer 1

선택한 항목 (일명 클릭 한 항목) 만 바꾸기를 원하므로 다시 선택하지 말고 대신 클릭 한 개체 (this)를 사용하십시오.

//Replace the 'Add To Cart' button 
$('.add-to-cart-btn').click(function(){ 
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Add to Cart">'); 
return false; 
}); 

Answer 2

나는이 작업을 수행하는보다 효율적인 방법이있을 거라고 생각 :

$('.add-to-cart-btn').click(function() { 
    this.src = 'images/button-added-to-cart.png'; 
    this.alt = 'Item added to Cart'; 
    return false; 
});