Javascript 使用jquery将总价相加_Javascript_Jquery_Html

Javascript 使用jquery将总价相加

javascript jquery html

Javascript 使用jquery将总价相加,javascript,jquery,html,Javascript,Jquery,Html,JS上的新手真的被卡住了。我有一个加号和减号按钮，可以把产品相加。但是我需要这个总价的结果相应地加起来。有些产品只能以2、5或10的倍数购买我这里有我的html和我的2个产品。一个只能以5的倍数出售，另一个只能以10的倍数出售  <div class="item"> <div class="buttons"> <span class="delete-btn">

JS上的新手真的被卡住了。我有一个加号和减号按钮，可以把产品相加。但是我需要这个总价的结果相应地加起来。有些产品只能以2、5或10的倍数购买

我这里有我的html和我的2个产品。一个只能以5的倍数出售，另一个只能以10的倍数出售

<!-- Product #6 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="intem-6.jpg" alt="" />
        </div>

        <div class="description">
          <span>DLT-19 Heavy Blaster Rifle</span>
          <span>Brown</span>
        </div>

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

        <div id="multiple5" class="total-price">$5800</div>
      </div>

        <!-- Product #7 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-7.jpg" alt="" >
        </div>

        <div class="description">
          <span>DL-44 Heavy Blaster Pistol</span>
          <span>Brown</span>
        </div>

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

        <div id="multiple10" class="total-price">$1500</div>
      </div>
    </div>


DLT-19重型爆能步枪
棕色的
$5800
DL-44重型爆能手枪
棕色的
$1500

这是我的jQuery，它在单击我的按钮时加起来是1

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

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

        $input.val(value);

      });

    $('.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);
    });

<html>
    <head>
        <title>Hello</title>

        <style>
            *{
                font-size: 25px;
            }
        </style>

    </head>

    <body>

        <button id="plus"> + </button>
        <input id="quantity" type="number" value='1'>    
        <button id="minus"> - </button>
        <div id="total">5</div>


        <script>

            let plus = document.getElementById('plus');    
            let quantityEle = document.getElementById('quantity');    
            let minus = document.getElementById('minus');    
            let total = document.getElementById('total');    

            let quantity = quantityEle.value;
            let price = 5;

            plus.addEventListener('click', function(){
                quantity++; 
                quantityEle.value = quantity;
                total.innerHTML = price * quantity;

            });

            minus.addEventListener('click', function(){
                if(quantity > 1)
                quantity--; 
                quantityEle.value = quantity;
                total.innerHTML = price * quantity;
            });

            quantityEle.addEventListener('change', function(){
                quantity = quantityEle.value;
                total.innerHTML = price * quantity;
            });

            var total = $this.closest('div').find('div');

        </script>


    </body>
</html>

$（'.减去btn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$this=$（this）；
var$input=$this.closest（'div'）。find（'input'）；
var value=parseInt（$input.val（））；
如果（值>=1）{
值=值-1；
}否则{
数值=0；
}
$input.val（值）；
});
$（'.plus btn'）。在（'click'，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var$input=$this.closest（'div'）。find（'input'）；
var value=parseInt（$input.val（））；
如果（值<100）{
值=值+1；
}否则{
数值=100；
}
$input.val（值）；
});

我尝试在搜索时单独执行，但无法在其他代码中实现这一点。只希望结果与我的按钮的on.click事件一起增加和减少价格

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

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

        $input.val(value);

      });

    $('.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);
    });

<html>
    <head>
        <title>Hello</title>

        <style>
            *{
                font-size: 25px;
            }
        </style>

    </head>

    <body>

        <button id="plus"> + </button>
        <input id="quantity" type="number" value='1'>    
        <button id="minus"> - </button>
        <div id="total">5</div>


        <script>

            let plus = document.getElementById('plus');    
            let quantityEle = document.getElementById('quantity');    
            let minus = document.getElementById('minus');    
            let total = document.getElementById('total');    

            let quantity = quantityEle.value;
            let price = 5;

            plus.addEventListener('click', function(){
                quantity++; 
                quantityEle.value = quantity;
                total.innerHTML = price * quantity;

            });

            minus.addEventListener('click', function(){
                if(quantity > 1)
                quantity--; 
                quantityEle.value = quantity;
                total.innerHTML = price * quantity;
            });

            quantityEle.addEventListener('change', function(){
                quantity = quantityEle.value;
                total.innerHTML = price * quantity;
            });

            var total = $this.closest('div').find('div');

        </script>


    </body>
</html>


你好
*{
字体大小：25px；
}
+ 
- 
5.
让plus=document.getElementById（'plus'）；
让quantityEle=document.getElementById（'quantity'）；
让减号=document.getElementById（'减号'）；
让total=document.getElementById（'total'）；
让数量=quantityEle.value；
价格=5；
plus.addEventListener（'click'，function（））{
数量++；
quantityEle.value=数量；
total.innerHTML=价格*数量；
});
减.addEventListener（'click'，function（）{
如果（数量>1）
数量--；
quantityEle.value=数量；
total.innerHTML=价格*数量；
});
quantityEle.addEventListener（'change'，function（）{
数量=quantityEle.value；
total.innerHTML=价格*数量；
});
var total=$this.closest（'div'）。find（'div'）；

给你

$（'.减去btn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$parent=$（this）.closest（'.item'）；
var$input=$parent.find（'input'）；
var$total=$parent.find（'.total price span'）；
var value=parseInt（$input.val（））；
如果（值>=1）{
值=值-1；
}否则{
数值=0；
}
$input.val（值）；
$total.html（值）；
calcTotal（）；
});
$（'.plus btn'）。在（'click'，函数（e）{
e、 预防默认值（）；
var$parent=$（this）.closest（'.item'）；
var$input=$parent.find（'input'）；
var$total=$parent.find（'.total price span'）；
var value=parseInt（$input.val（））；
如果（值<100）{
值=值+1；
}否则{
数值=100；
}
$input.val（值）；
$total.html（值）；
calcTotal（）；
});
函数calcTotal（）{
设total=0；
$（“.total price span”）。每个（函数（）{
total+=parseInt（$（this.html（））；
});
$（'#total'）.html（'$'+total）；
}

#总计{
颜色：红色；
}


DLT-19重型爆能步枪
棕色的
+
-
$1
DL-44重型爆能手枪
棕色的
+ 
-
$1
总额：2美元

我认为你的问题问得很糟糕。
据我所知，您试图在JS'vanila'中编写jQuery的等价物，以实现（2,5,10）数量的增量-减量，并实现相应的总数

下面是“我的解决方案”：

文档
.querySelectorAll（'按钮.减号'）
.forEach（bt=>
{
bt.onclick=e=>
{
让P_parent=e.target.parentNode
，Inc=parseInt（P_parent.dataset.increment）
，U_price=parseFloat（P_parent.dataset.price）.toFixed（2）
，val=parseInt（P_parent.querySelector（'.quantity'）.value）
如果（val>0）
{
瓦尔公司
P_parent.querySelector（'.quantity'）。value=val
P_parent.querySelector（'.total'）.textContent='$'+（val*U价格）.toFixed（2）
} 
}
})
文件
.querySelectorAll（'button.plus'））
.forEach（bt=>
{
bt.onclick=e=>
{
让P_parent=e.target.parentNode
，Inc=parseInt（P_parent.dataset.increment）
，U_price=parseFloat（P_parent.dataset.price）.toFixed（2）
，Max=parseInt（P_parent.dataset.Max）
，val=parseInt（P_parent.querySelector（'.quantity'）.value）
如果（val


body{font:14px无衬线；padding:1em；}
h3{边距：1.5em 0；}
input.quantity{宽度：4em；文本对齐：右}
托塔先生