只替换一个元素而不是全部

Question

好的，我在发布之前自己试过，但是在这里我碰到了一堵墙。

我的产品的列表，每个产品都有一个“放入购物车”按钮/图像，我想该图像与被替换“项目添加到购物车”的形象。

我遇到的问题是，当我替换一个图像时，所有图像都被替换。现在你可以知道我是多么新的jQuery了。

这是我的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：

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

正如你所看到的，我更换整个AHREF元素，因为当添加的项目，我不t希望该按钮可以再次点击。

任何想法如何使一个特定的“添加到购物车”按钮/图像被取代，而不是所有的按钮？

感谢您给我的任何帮助和指导。

Answer 1

您只想替换您选择的项目（AKA，被点击的项目），因此不要再次进行选择，而是使用被点击的对象（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; 
});