Javascript 是否更新订单项目总数中的增量数量？

我试图在点击图像卡时更新项目总数，并在订单面板中更新相应的总数和价格。见截图

目前，我正在使用“更新食品数量”功能增加图像卡上黑色圆圈

qty图标

div中的总数量，下面的函数会增加数量，但我如何将增加的值传递到底部

添加订单面板

面板中的“0项”字段，并更新中的价格“添加到订单”

---

0
滑块
$5

---

您已经考虑过了：）您已经将所需的元素存储到了一个名为“num”的变量中。然后您将获取其中的文本。下面是您要做的

将num重新定义为元素的文本

对要更新文本的每个其他元素执行此操作

然后将函数中的所有值相加

将其保存在一个名为total的var中，并在应该包含total的区域中更新该值

确保每次函数运行时都从0开始total，否则将复合该值

注意：您需要全局声明所有变量，然后在本地更新它们。不要在本地声明任何变量，否则当您尝试在其他函数中更新它们时，它们将返回未定义的状态

$(function() {
let total = 0
$('.food-container').click( function() 
{var num = $(this).find('.qty-icon'); 
num = num.text( parseInt(num.text()) + 1 ); 
total = num + otherVar  + yetAnotherVar});});

---

您可以使用

。每个
循环迭代您的
食品容器
div，然后在该div中，您需要获取
数量
，
价格
，并将其添加到某个变量中。最后，在
总计
项目数量范围内显示这些值

演示代码：


$（函数（）{
$（'.food container.qty图标'）。单击（函数（）{
var num=$（这是）；
num.text（parseInt（num.text（））+1）；
变量数量=0；
var合计=0；
//在你的食物容器里循环
$（“.food container”）。每个（函数（）{
//在evry迭代中添加总数量
qty+=parseInt（$（this）.find（“.qty图标”）.text（））
//获取实际数量
变量qty\u of_item=parseInt（$（this）.find（“.qty icon”）.text（））
//将其与价格相加，再加上总数
总计+=parseInt（$（this）.find（'.price'）.text（）.replace（'$，''）*quantity\u of_项目；
})
$（“.order-but-container.one.bold cash”）.text（数量）；//设置新数量
$（“#总计”）.text（$”+总计）//设置总计
});
})；
。食品容器{
宽度：105px；
高度：150像素；
边框：1px纯蓝色；
下页边距：5px
}
.美食偶像{
文本对齐：右对齐；
字号：20px
}

0
披萨
$10
0
汉堡
$5
0
有些事
$5
我假设您希望它添加所单击的所有内容的值，而不是只匹配一个项目是否正确？为什么不将每个递增项目的值保存到一个变量中，然后在单击按钮时运行的函数中添加这些变量。然后更新存储在变量。仅供参考，像React或JQuery这样的框架使类似的操作变得非常简单。特别是React。谢谢Chris，是的，我确实想添加/更新单击的每个项目的值。我同意你的伪代码解决方案，但我的javascript技能非常基础。我不知道如何构造你的解决方案。我正在使用JQuery，我没有学会rned React。抱歉，我只是看不到。我已经有几年没有使用js/jq了。用户当前正在单击
.food container
div中的多个图像以更新数量，但是该值在其他div中是如何更新的？在“Items 0”字段中如何显示相同的值？那么该值是如何更新的在“添加到订单$0”字段中生成总订单金额的每个项目的价格？示例：我单击“滑块”图像，使1个项目的价格为$5。然后我单击“热狗”图像，使2个项目的价格为$5。项目总数为2，订单总额为$10
num
是此处的一个对象，无法计算…太棒了！谢谢非常感谢！我正试图用innerHTML替换div文本bc，但我忘记了
.text（）
，这要简单得多。再次感谢，我非常感谢你花时间回复。我是一个视觉化的人，通过查看示例，我更容易理解代码的工作原理。新年快乐！
<!-- Sliders -->
<div class="food-container">
    <div class="food-icon">
        <div class="qty-icon">0</div>
        <img src="images/food/icons/sliders.png" alt="">
    </div>

    <div class="food-details">
        <div class="food-title left">
            <h4>Sliders</h4>
        </div>

        <div class="food-title right">
            <h4>$5</h4>
        </div>
    </div>
</div>

<!-- Add to Order Panel -->
<div class="add-order-panel down">
    <!-- Order Buttons -->
    <div class="order-buttons">
        <a href="#">
            <div class="order-but-container one">
                <h4><span class="bold-cash">0</span> Items</h4>
            </div>
        </a>

        <a href="#">
            <div class="order-but-container two">
                <div class="order-label">
                    <h4>Add to Order</h4>
                </div>

                <div>
                    <h4><span class="bold-cash">$0</span></h4>
                </div>
            </div>
        </a>
    </div>
</div>

$(function() {
let total = 0
$('.food-container').click( function() 
{var num = $(this).find('.qty-icon'); 
num = num.text( parseInt(num.text()) + 1 ); 
total = num + otherVar  + yetAnotherVar});});