Fatal编程技术网
  • jquery/
  • 使用Jquery在购物车中发布

使用Jquery在购物车中发布

jquery

使用Jquery在购物车中发布,jquery,cart,Jquery,Cart,我正在设计一辆购物车。在这个购物车中，第一个产品的功能运行良好，但我在第二个产品中遇到了一个问题。有人能建议/帮助我做这件事吗。请看下面提到的小提琴链接。 此外，此购物车可以很好地处理单个产品，但对于多个产品，它无法工作 这里是HTML <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="shopping

我正在设计一辆购物车。在这个购物车中，第一个产品的功能运行良好，但我在第二个产品中遇到了一个问题。有人能建议/帮助我做这件事吗。请看下面提到的小提琴链接。 此外，此购物车可以很好地处理单个产品，但对于多个产品，它无法工作

这里是HTML

<div class="container">
     <div class="row">
        <div class="col-sm-12">
           <div class="shopping-cart">
              <div class="column-labels">
                 <label class="product-image">Image</label>
                 <label class="product-details">Product</label>
                 <label class="product-price">Price</label>
                 <label class="product-quantity">Quantity</label>
                 <label class="product-removal">Remove</label>
                 <label class="product-line-price">Total</label>
              </div>
              <div class="product">
                 <div class="product-image">
                 </div>
                 <div class="product-details">
                    <div class="product-title">Test Product</div>
                    <p class="product-description">Lorem ipsum dolor...</p>
                 </div>
                 <div class="product-price">100</div>
                 <div class="product-quantity">
                    <div class="button-container">
                       <button class="cart-qty-plus" type="button" value="+">+</button>
                       <button class="cart-qty-minus" type="button" value="-">-</button>
                       <input type="number" value="1" min="1" class="qty" disabled>
                    </div>
                 </div>
                 <div class="product-removal">
                    <button class="remove-product">
                    Remove
                    </button>
                 </div>
                 <div class="product-line-price">100</div>
              </div>
              <div class="product">
                 <div class="product-image">
                 </div>
                 <div class="product-details">
                    <div class="product-title">Test product2</div>
                    <p class="product-description">Lorem ipsum dolor</p>
                 </div>
                 <div class="product-price">100</div>
                 <div class="product-quantity">
                    <div class="button-container">
                       <button class="cart-qty-plus" type="button" value="+">+</button>
                       <button class="cart-qty-minus" type="button" value="-">-</button>
                       <input type="number" value="1" min="1" class="qty" disabled>
                    </div>
                 </div>
                 <div class="product-removal">
                    <button class="remove-product">
                    Remove
                    </button>
                 </div>
                 <div class="product-line-price">100</div>
              </div>
              <div class="totals">
                 <div class="totals-item">
                    <label>Subtotal</label>
                    <div class="totals-value" id="cart-subtotal">71.97</div>
                 </div>
                 <div class="totals-item">
                    <label>Tax (5%)</label>
                    <div class="totals-value" id="cart-tax">3.60</div>
                 </div>
                 <div class="totals-item">
                    <label>Shipping</label>
                    <div class="totals-value" id="cart-shipping">15.00</div>
                 </div>
                 <div class="totals-item totals-item-total">
                    <label>Grand Total</label>
                    <div class="totals-value" id="cart-total">90.57</div>
                 </div>
              </div>
              <button class="checkout">Checkout</button>
           </div>
        </div>
     </div>
  </div>


形象
产品
价格
量
去除
全部的
测试产品

Lorem ipsum dolor

100
+
-
去除
100
测试产品2

Lorem ipsum dolor

100
+
-
去除
100
小计
71.97
税款（5%）
3.60
航运
15
总计
90.57
结账
这是剧本

var taxRate = 0.05;
var shippingRate = 15.00;
var fadeTime = 300;



$(document).ready(function() {
    recalculateCart();
});


//On click Plus button

$(document).ready(function() {
    $(".cart-qty-plus").click(function() {
        var $n = $(this)
            .parent(".button-container")
            .parent(".product-quantity")
            .find(".qty");

        $n.val(Number($n.val()) + 1);

        updateQuantity(this);

    });
});


// On click minus button


$(document).ready(function() {
    $(".cart-qty-minus").click(function() {
        var $n = $(this)
            .parent(".button-container")
            .parent(".product-quantity")
            .find(".qty");

        var amount = Number($n.val());
        if (amount > 1) {
            $n.val(amount - 1);

            updateQuantity(this);

        }
    });
});



// If the removed button is clicked


$('.product-removal button').click(function() {
    removeItem(this);
});


/* Recalculate cart */

function recalculateCart() {
    var subtotal = 0;

    /* Sum up row totals */

    $('.product').each(function() {
        subtotal += parseFloat($(this).children('.product-line-price').text());

    });

    /* Calculate totals */

    var tax = subtotal * taxRate;
    var shipping = (subtotal < 300 ? shippingRate : 0);
    var total = subtotal + tax + shipping;

    /* Update totals display */
    $('.totals-value').fadeOut(fadeTime, function() {
        $('#cart-subtotal').html(subtotal.toFixed(2));
        $('#cart-tax').html(tax.toFixed(2));
        $('#cart-shipping').html(shipping.toFixed(2));
        $('#cart-total').html(total.toFixed(2));
        if (total == 0) {
            $('.checkout').fadeOut(fadeTime);
        } else {
            $('.checkout').fadeIn(fadeTime);
        }
        $('.totals-value').fadeIn(fadeTime);
    });
}


/* Update quantity */

function updateQuantity(quantityInput) {
    /* Calculate line price */

    var productRow = $(quantityInput).parent().parent().parent();
    var price = parseFloat(productRow.children('.product-price').text());



    var quantity = $(".qty").val();



    var linePrice = price * quantity;

    /* Update line price display and recalc cart totals */

    productRow.children('.product-line-price').each(function() {
        $(this).fadeOut(fadeTime, function() {
            $(this).text(linePrice.toFixed(2));
            recalculateCart();
            $(this).fadeIn(fadeTime);
        });
    });
}


/* Remove item from cart */
function removeItem(removeButton) {
    /* Remove row from DOM and recalc cart total */
    var productRow = $(removeButton).parent().parent();
    productRow.slideUp(fadeTime, function() {
        productRow.remove();
        recalculateCart();
    });
}

var税率=0.05；
var发货率=15.00；
var fadeTime=300；
$（文档）.ready（函数（）{
重新计算cart（）；
});
//点击加号按钮
$（文档）.ready（函数（）{
$（“.cart qty plus”）。单击（函数（）{
变量$n=$（此）
.parent（“.button容器”）
.母公司（“产品数量”）
.find（“.qty”）；
$n.val（数字（$n.val（））+1）；
更新性（本）；
});
});
//单击减号按钮
$（文档）.ready（函数（）{
$（“.cart数量减”）。单击（函数（）{
变量$n=$（此）
.parent（“.button容器”）
.母公司（“产品数量”）
.find（“.qty”）；
风险值金额=数量（$n.val（））；
如果（金额>1）{
$n.val（金额-1）；
更新性（本）；
}
});
});
//如果单击了“已删除”按钮
$（'.product Removing button'）。单击（函数（）{
移除（本）；
});
/*重新计算购物车*/
函数重新计算cart（）{
var小计=0；
/*汇总行总数*/
$（'.product'）。每个（函数（）{
小计+=parseFloat（$（this）.children（'.productline price'）.text（））；
});
/*计算总数*/
var税=小计*税率；
var发货=（小计<300？发货率：0）；
var总计=小计+税费+运费；
/*更新总计显示*/
$（'.totals value'）.fadeOut（fadeTime，function（）{
$（“#购物车小计”）.html（小计.toFixed（2））；
$（'#cart tax'）.html（tax.toFixed（2））；
$（'#cart shipping'）.html（shipping.toFixed（2））；
$（'#cart total'）.html（total.toFixed（2））；
如果（总计==0）{
$（'.checkout'）.fadeOut（fadeTime）；
}否则{
$（'.checkout'）.fadeIn（fadeTime）；
}
$（'.totals value'）.fadeIn（fadeTime）；
});
}
/*更新数量*/
函数updateQuantity（quantityInput）{
/*计算线路价格*/
var productRow=$（quantityInput）.parent（）.parent（）.parent（）；
var price=parseFloat（productRow.children（'.product price'）.text（））；
变量数量=$（“.qty”）.val（）；
var linePrice=价格*数量；
/*更新行价格显示和重新计算购物车总计*/
productRow.children（'.productline price'）。每个（函数（）{
$（this）.fadeOut（fadeTime，function（）{
$（this.text（linePrice.toFixed（2））；
重新计算cart（）；
$（this.fadeIn（fadeTime）；
});
});
}
/*从购物车中删除项目*/
功能removeItem（removeButton）{
/*从DOM中删除行并重新计算购物车总数*/
var productRow=$（removeButton）.parent（）.parent（）；
productRow.slideUp（fadeTime，function（）{
productRow.remove（）；
重新计算cart（）；
});
}
这里是链接

仅更改此行：

 var quantity = $(".qty").val();
到

仅更改此行：

 var quantity = $(".qty").val();
到

我建议对单击的元素附近的元素使用.closest（）方法。

我建议对单击的元素附近的元素使用.closest（）方法。 
var-price=parseFloat（productRow.children（'.product-price'）.text（））将始终获取第一项的价格。您应该使用另一种策略在购物车上显示商品。一组对象（项目）应该可以做到这一点。这是适当的扩展方式。您能再建议一点吗
var price=parseFloat（productRow.children（'.product price'）.text（））将始终获取第一项的价格。您应该使用另一种策略在购物车上显示商品。一组对象（项目）应该可以做到这一点。这是适当的扩展方式。你能再多提一点建议吗？非常感谢。它现在运转良好。任何进一步提高代码质量的建议都是非常受欢迎的。非常感谢。它现在运转良好。任何进一步提高代码质量的建议都是非常受欢迎的。