Заменить только один элемент, а не все

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, потому что при добавлении элемента я не хочу, чтобы эта кнопка снова активировалась.

Любая идея, как получить только эту конкретную кнопку «Добавить в корзину» / изображениезаменены и не все кнопки?

Спасибо за любую помощь и руководство, которое вы можете дать мне.

Answer 1

Вы хотите заменить только выбранный вами элемент (AKA, элемент, по которому щелкнули), поэтому не делайте выбор снова и вместо этого используйте объект, по которому щелкнули (это).

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