Jquery 将类添加到特定元素中，而不是添加到所有具有相同类的元素中

对于你们中的许多人来说，我的问题必须非常简单才能解决，但我不知道如何指定元素，下面是发生的事情

我有一个产品列表及其图像和每个产品的“添加到购物车”按钮。我想在单击产品的特定“添加到购物车”按钮时，将类添加到产品的容器中

到目前为止，我能够做到这一点，但所有产品的容器都添加了类

以下是我的基本HTML：

<div class="prod-img"><a href="#"><img src="images/product-1.jpg" alt=""></a></div>
<div class="product-info"><span class="price">$40.00</span>
  <p class="description">Lorem ipsum dolor...</p>
  <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
</div>

<div class="prod-img"><a href="#"><img src="images/product-2.jpg" alt=""></a></div>
<div class="product-info"><span class="price">$40.00</span>
  <p class="description">Lorem ipsum dolor...</p>
  <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
</div>

<div class="prod-img"><a href="#"><img src="images/product-3.jpg" alt=""></a></div>
<div class="product-info"><span class="price">$40.00</span>
  <p class="description">Lorem ipsum dolor...</p>
  <a href="#" class="add"><img src="images/button-add-to-cart.png" alt="Add to Cart"></a>
</div>

我的jQuery：

$('.add').click(function(){
  $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');
  $('.prod-img').addClass('prod-added');
return false;
});

仅供参考，单击“添加到购物车”按钮后，它将被添加到购物车图像的项目替换

如何使特定产品的容器在不将其添加到其他产品的情况下获得“prod added”类

谢谢你在这方面的帮助

-

编辑

---

很抱歉，我不希望解决方案是基于实际选择的前一个元素。在产品和“添加到购物车”按钮之间还有两个元素。代码已更新。感谢您的帮助。

编辑后，您似乎希望匹配的div正好位于此项的父项之前：

---

现在，更改产品显示组中元素的顺序、在元素之间添加新项目或诸如此类的操作都无关紧要。

编辑后，您似乎希望匹配的div正好位于此项的父项之前：

---

现在，更改产品显示组中元素的顺序、在元素之间添加新项目或诸如此类的事情都无关紧要。

我认为最好的方法是为每个元素指定一个id 并做到这一点：

$('.add').click(function(){
    var id = $(this).attr('id');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');
    $('#' + id).addClass('prod-added');
    return false;
});

---

我认为最好的方法是为每个元素指定一个id 并做到这一点：

$('.add').click(function(){
    var id = $(this).attr('id');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');
    $('#' + id).addClass('prod-added');
    return false;
});

---

为了让它发挥作用，你必须这样做

$('.add').click(function(){
     $(this).parent('div').prev('.prod-img').addClass('prod-added');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');

    return false;
});

与JacobM几乎相同，但由于要替换dom中的元素，因此必须在替换之前应用该类

---

为了让它发挥作用，你必须这样做

$('.add').click(function(){
     $(this).parent('div').prev('.prod-img').addClass('prod-added');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');

    return false;
});

与JacobM几乎相同，但由于要替换dom中的元素，因此必须在替换之前应用该类

---

感谢洛克塔和雅各布

解决办法是：

HTML:

jQuery：

$('.add').click(function(){
    $(this).parents("ol.search-results li").find('.prod-img').addClass('prod-added');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');          
return false;
});

---

因此，当您单击“添加到购物车”按钮时，不仅按钮被替换为“添加到购物车的物品”图像，而且产品图像也被添加到一个类中，您可以在CSS中设置样式，以提高添加到购物车功能的可用性。

感谢Loktar和JacobM

解决办法是：

HTML:

jQuery：

$('.add').click(function(){
    $(this).parents("ol.search-results li").find('.prod-img').addClass('prod-added');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');          
return false;
});

---

因此，当您单击“添加到购物车”按钮时，不仅按钮被替换为“添加到购物车的项目”图像，但是，产品的图像中添加了一个类，您可以在CSS中设置样式，以提高“添加到购物车”功能的可用性。

您如何知道需要哪个ID？即使他更改了示例以获得您所需的ID，您也不能在html中对多个元素使用相同的ID。这是严格禁止的。然后就变得疯狂了。每个元素都需要特殊的前缀，然后必须进行解析和其他疯狂操作。prev要简单得多。这不是必需的。可以使用元素的相对导航来完成。你如何知道你想要哪个ID？即使他更改了他的示例以获得你需要的ID，你也不能在html中对多个元素使用相同的ID。这是严格禁止的。然后就变得疯狂了。每个元素都需要特殊的前缀，然后必须进行解析和其他疯狂操作。prev要简单得多。这不是必需的。它可以通过元素的相对导航来完成。Loktar，我必须编辑上面的代码，我从来没有想过解决方案完全依赖于前面的元素。谢谢你的帮助。好的，更新了我的答案，试试看它是否有效，还更新了JSFIDLE链接。太好了！它完全符合我的需要。非常感谢Loktar。但我有一个问题：您使用了.parent，但您和兄弟姐妹是否处于同一“级别”？。。。换句话说，孩子的父母是怎样的？不确定我问的是否正确，正如您所看到的，我对jQuery非常陌生。谢谢..添加包含在产品信息中，因此this.parent=产品信息，产品图像位于产品信息之前，因此它是前一个元素。基本上你是从一开始。增加等级，然后逐步改变它的风格，如果这有意义的话。哦！好的，我想我明白了。我们正在查找addtocart按钮的父级，即，然后查找该div的上一个元素并对其进行更改，对吗？^ ^-好的，请阅读您的解释，是的，现在有意义了，再次感谢。Loktar，我必须编辑上面的代码，我从未想过解决方案完全依赖于前面的元素。谢谢你的帮助。好的，更新了我的答案，试试看它是否有效，还更新了JSFIDLE链接。太好了！它完全符合我的需要。非常感谢Loktar。但我有一个问题：你使用了.parent，但不是和兄弟姐妹，因为他们在

---

e相同的“级别”？。。。换句话说，孩子的父母是怎样的？不确定我问的是否正确，正如您所看到的，我对jQuery非常陌生。谢谢..添加包含在产品信息中，因此this.parent=产品信息，产品图像位于产品信息之前，因此它是前一个元素。基本上你是从一开始。增加等级，然后逐步改变它的风格，如果这有意义的话。哦！好的，我想我明白了。我们正在查找addtocart按钮的父级，即，然后查找该div的上一个元素并对其进行更改，对吗？^ ^-好的，请阅读您的解释，是的，现在有意义了，再次感谢。JacobM，我必须编辑上面的代码，正如我在下面告诉Loktar的那样，我从未想过解决方案完全依赖于前面的元素。也感谢您的帮助。编辑以反映对HTML的更改，并提供更通用的解决方案。JacobM，我更喜欢您的解决方案，它更具可扩展性。我确实将我的元素包装在一个容器中，但它不是一个DIV，而是一个LI，位于一个OL列表中，具有“search results”类，因此我所做的是：-$this.parentsol.search-results LI.find'.prod img'.addClass'prod-added'；-它工作得很好。非常感谢您的帮助和解释。JacobM，我必须编辑上面的代码，正如我在下面告诉Loktar的那样，我从未想过解决方案完全依赖于前面的元素。也感谢您的帮助。编辑以反映对HTML的更改，并提供更通用的解决方案。JacobM，我更喜欢您的解决方案，它更具可扩展性。我确实将我的元素包装在一个容器中，但它不是一个DIV，而是一个LI，位于一个OL列表中，具有“search results”类，因此我所做的是：-$this.parentsol.search-results LI.find'.prod img'.addClass'prod-added'；-它工作得很好。非常感谢您的帮助和解释。

$('.add').click(function(){
    $(this).parents("ol.search-results li").find('.prod-img').addClass('prod-added');
    $(this).replaceWith('<img src="images/button-added-to-cart.png" alt="Item added to Cart" class="added">');          
return false;
});