Question

<div class="pricing-item" id="price">
    <img class="img-responsive img-thumbnail" src="<?php echo WEB;?>img/dish/dish3.jpg" alt="">
    <div class="pricing-item-details">
        <h3><b>Mutter Paneer Masala</b></h3>
        <p>Vegetarian north Indian dish consisting of peas and paneer in a tomato based sauce, spiced with garam masala.</p>
        <a class="btn btn-danger" href="1">Add to Cart</a>
        <div class="clearfix"></div>
    </div>
    <!--price tag-->
    <span class="hot-tag br-red" id="price_no">₹ 126</span>
    <div class="clearfix"></div>
</div>

我想要的是，当我点击添加到购物车时，我想在codeigniter中将产品的名称和价格发布到控制器。这个内容是静态的。所以请告诉我如何发布这个内容，我有很多产品。提前谢谢。

Answer 1

由于您已经提到内容是静态的，所以我可以根据您提供的信息和代码段来思考解决方案示例：

<div class="pricing-item" id="price">
    <img class="img-responsive img-thumbnail" src="<?php echo WEB;?>img/dish/dish3.jpg" alt="">
    <div class="pricing-item-details">
        <h3><b>Mutter Paneer Masala</b></h3>
        <p>Vegetarian north Indian dish consisting of peas and paneer in a tomato based sauce, spiced with garam masala.</p>
        <button class="btn btn-danger add-cart">Add to Cart</button>
        <div class="clearfix"></div>
    </div>
    <!--price tag-->
    <span class="hot-tag br-red" id="price_no">₹ <span class="product-price">126</span></span>
    <div class="clearfix"></div>
</div>

<div class="pricing-item" id="price">
    <img class="img-responsive img-thumbnail" src="<?php echo WEB;?>img/dish/dish3.jpg" alt="">
    <div class="pricing-item-details">
        <h3><b>Product 2</b></h3>
        <p>My second product.</p>
        <button class="btn btn-danger add-cart">Add to Cart</button>
        <div class="clearfix"></div>
    </div>
    <!--price tag-->
    <span class="hot-tag br-red" id="price_no">₹ <span class="product-price">1000</span></span>
    <div class="clearfix"></div>
</div>

// And more products...

<script>
    $(document).ready(function(){
        $('.add-cart').on('click', function () {
            var productName = $(this).closest('.pricing-item').find('h3 > b').text();
            var productPrice = $(this).closest('.pricing-item').find('.product-price').text();

            $.ajax({
                type: 'POST',
                data: {
                    name: productName,
                    price: productPrice,
                },
                dataType: 'json',
            });
        });
    });
</script>

这将使用ajax发布产品名称和价格。

但我强烈建议您从数据库中动态显示产品列表，并且可能只需添加产品ID的数据属性并发布该ID而不是静态名称和价格。然后让后端（codeigniter）方根据产品ID从数据库中获取正确的产品名称和价格。

考虑使用锚标记

1 个答案: