Question

好的，我在发布之前自己尝试过这个，但此时我碰到了一堵墙。

我有一个产品列表，每个产品都有一个'添加到购物车'按钮/图像，我希望用添加到购物车的'项目替换该图像'image。

我遇到的问题是，当我更换一张图像时，所有图像都会被替换。你现在可以告诉我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元素，因为当添加项目时，我不希望该按钮再次被点击。

知道如何更换一个特定的“添加到购物车”按钮/图像而不是所有按钮？

感谢您提供的任何帮助和指导。

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

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

2 个答案: