使用javascript创建购物车 [英] Create shopping cart using javascript

问题描述

你好

我正在编写一个带有JavaScript的在线购物系统购物车。我的问题是更新总价，当产品数量发生变化时，我不知道该怎么做。相关代码如下：



HTML：

 <   div     class   =  product-price   样式  =  margin-left：60px ; >  <   / div  >  
 
 <   div     class   =  数量 >  
  <  按钮    class   =  plus-btn    type   = 按钮   名称  = 按钮 >  
 <   img     src   =  ../ img / svg / PlusQ.png    alt   =     /  >  
 <   / button  >  
 
 <  输入    type   =  text   名称  = 名称    value   =  1 >  
 
 <   button     class   =  minus-btn    type   = 按钮   姓名  = 按钮 >  
 <   img     src   =  ../ img / svg /MinusQ.png\"   alt   =      /  >  
 <   / button  >  
 
 <   div     class   = 总价 > & lt; label>& lt; / label> <   / div  >  

< br $>








JS：

< pre lang =Javascript> $（' 。minus-btn'）。on（' 点击'，功能（e）{
e.preventDefault（）;
var $ this = $（ this ）;
var $ input = $ this.closest（' div'）。find（' input'）;
var $ totalprice = $ this.closest（' div'）。find（' lable'）; // 我对此行有疑问
var value = parseInt （$ input.val（））;

if （value！= 1 ）{
value =值 - 1 ;
} else {
value = 0 ;
}

$ input.val（value）;
$ totalprice.innerHTML = value * 2 ; // 测试总价格是否有效，它不

}）;

$（' 。plus-btn'）。on（' 点击'，功能（e）{
e.preventDefault（）;
var $ this = $（ this ）;
var $ input = $ this.closest（' div'）。find（' input'）;
< span class =code-keyword> var value = parseInt （$ input.val（））;

if （value！= 100 ）{
value = value + 1 ;
} 其他 {
value = 100 ;
}

$ input.val（va略）;
}）;

我尝试过：



实际上，我不知道如何访问.product-price和.total-price是当前div之前和之后的div元素。

解决方案

（' 。minus-btn'）。on（< span class =code-string>' click'， function （e）{
e.preventDefault（）;
var

this =

（ this ）;
var

hello
I am coding an online-shopping system Cart with JavaScript. my problem is to update Total Price, when the product quantity changes, I don Not know how to do that. related codes are:

HTML:

<div class="product-price" style="margin-left:60px;"></div>

<div class="quantity">
  <button class="plus-btn" type="button" name="button">
      <img src="../img/svg/PlusQ.png" alt="" />
  </button>
   
  <input type="text" name="name" value="1">

  <button class="minus-btn" type="button" name="button">
    <img src="../img/svg/MinusQ.png" alt="" />
  </button>
                            
<div class="total-price">&lt;label>&lt;/label></div>

JS:

$('.minus-btn').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var $input = $this.closest('div').find('input');
    var $totalprice = $this.closest('div').find('lable'); // I have problem with this line
    var value = parseInt($input.val());

    if (value != 1) {
        value = value - 1;
    } else {
        value = 0;
    }

    $input.val(value);
    $totalprice.innerHTML = value * 2; // Testing if Total price works, It Does NOT

});

$('.plus-btn').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var $input = $this.closest('div').find('input');
    var value = parseInt($input.val());

    if (value != 100) {
        value = value + 1;
    } else {
        value = 100;
    }

    $input.val(value);
});

What I have tried:

in fact, I do not know how to access .product-price and .total-price that are a "div" element before and after the current "div".

解决方案

('.minus-btn').on('click', function (e) { e.preventDefault(); var

this =

(this); var

这篇关于使用javascript创建购物车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！