Question

对于很多人来说，我的问题必须非常简单，但我不知道如何指定元素，这就是正在发生的事情。

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

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

这是我的基本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'）而不将其添加到其他产品中？

感谢您提供任何帮助。

-

修改

我道歉，我没想到解决方案基于实际选择前一个元素。我在产品和“添加到购物车”按钮之间还有两个元素。代码已更新。谢谢你的帮助。

Answer 1

编辑后，看起来您希望匹配的div位于this的父级之前：

$('.add').click(function(){

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

更一般地说，您想要一种方法将点击的链接链接到目标div。上面的方法有点脆弱，因为它依赖于你的HTML以正确的方式排列。更好的方法可能是将每组元素放入容器中，并以这种方式引用它们：

<div class="product-display"> 
   <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>

<div class="product-display">     
   <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>

然后你的jquery中的关键行变为

 $(this).parents(".product-display").find('.prod-img').addClass('prod-added');

现在，如果您更改“产品展示”组中的元素顺序，或者在它们之间添加新项目或类似内容，则无关紧要。

Answer 2

要使它工作，你必须这样做

$('.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中的元素，因此必须先应用该类。

http://jsfiddle.net/loktar/eTWkA/1/

Answer 3

感谢Loktar和JacobM。

解决方法是：

<强> HTML：

<ol class="search-results">
  <li>
    <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>
  </li>
  <li>
    <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>
  </li>
  <li>
    <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>
  </li>
</ol>

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提高了添加到购物车功能的可用性。

Answer 4

我认为最好的方法是为每个元素指定一个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;
});

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

4 个答案: