Question

这是我生成动态产品表的PHP代码：

while($item = mysqli_fetch_array($result))
            {
enter code here

$i++;
$pic = "cartimg/".$item[2];
  echo "<div class='prod_box'".$i.">
    <div class='center_prod_box'>
      <div class='product_title'><a>".$item[1]."</a></div>
      <div class='product_img'><a ><img src='".$pic."' alt='' border='0' /></a></div>
      <div class='prod_price'><span class='reduce'>".$item[3]."$</span> <a class='price'>".$item[4]."$</a></div>
    </div>
    <div class='prod_details_tab'> <a class='prod_buy'>Add to Cart</a> <a  class='prod_details'>Details</a> </div>
  </div>";
            }
  ?>

这是我的jQuery响应点击事件将产品添加到购物车

enter code here
cart.addBuyButton(".prod_buy",{

            name:'MacBook',                     // Item name appear on the cart
            thumbnail:'media/macbook.jpg',      // Thumbnail path of the item (Optional)
            price:$("span").index(0),                        // Cost of the item
            shipping:20   
                                  // Shipping cost for the item (Optional)
        });
  prettyPrint();

这是addBuyButton函数的查询

 enter code here
 self.addBuyButton=function(target,data){$(target).click(function(){self.cart.add(data)

问题是，我将有10个容器，包含10个产品，具有相同的类名和Id名称，而我无法弄清楚如何读取“。$ item [4]。”$ if客户点击了添加到购物车的不同产品。

现在该功能插入12作为价格。

请在这里帮助我，我已经浏览了很多jQuery教程，但是找不到办法。

感谢

Answer 1

我没有为jQuery上的每个项目添加一个addBuyButton，而是只有一个事件监听器可以像这样处理所有这些（我个人不喜欢引号中的大块php，因为我的IDE没有颜色突出显示所以请原谅我的PHP语法。如果你不喜欢它，你不必遵循它）：

PHP

<div id="products">
<?php while ($item = mysqli_fetch_array($result)) : ?>

     <!-- additional code here -->

    <div class="product prod_box<?php echo ++i; ?>">
        <div class="center_prod_box">
            <div class="product_title"><?php echo $item[1] ?></div>
            <div class="product_img"><img src="cartimg/<?php echo $item[2] ?>" border="0" /></div>
            <div class="prod_price">
                <span class="reduce"><?php echo $item[3] ?>$</span> 
                <a class="price"><?php echo $item[4] ?>$</a>
            </div>
        </div>
        <div class="prod_details_tab"> 
            <a class="prod_buy">Add to Cart</a> 
            <a class="prod_details">Details</a> 
        </div>
    </div>
<?php endwhile; ?>
</div>

JAVASCRIPT

$('#products').on('click', '.prod_buy', function() {
    var product = $(this).closest('.product');

    cart.add({
        name: product.find('.product_title').first().text(),
        thumbnail: product.find('.product_img').first().text(),
        price: product.find('.price').first().text(),
        shipping: 20 
    });
});

这是所有prod_buy按钮的一个事件监听器，它从DOM获取产品的值并将其添加到购物车。

如果您需要任何进一步的帮助，请在此帖子中添加评论，我会在答案中添加更多内容。

遇到jquery .context和.index问题

1 个答案: