Javascript 根据单击的（'；活动'；）元素，从列表选择选项中计算小计

这是我的目标： ||

在我做了一些研究之后，我能够用vue.js实现这一点

但是，当我尝试用纯javascript创建这个时，我被卡住了

来自佩萨南
@导入url(https://fonts.googleapis.com/css?family=Cookie);
[v-斗篷]{
显示：无；
}
*{
保证金：0；
填充：0；
}
身体{
字体：15px/1.3“开放式Sans”，无衬线；
颜色：#5e5b64；
文本对齐：居中；
}
a、 a:参观了{
大纲：无；
颜色：#389dc1；
}
a:悬停{
文字装饰：无；
}
节、页脚、页眉、侧边、导航{
显示：块；
}
形式{
背景色：#61a1bc；
边界半径：2px；
盒影：0 1px 1px#ccc；
宽度：400px；
填充：35px 60px；
保证金：50px自动；
}
表格h1{
颜色：#fff；
字体大小：64px；
字体系列：'Cookie'，草书；
字体大小：正常；
线高：1；
文本阴影：0 3px 0 rgba（0,0,0,0.1）；
}
表格ul{
列表样式：无；
字体大小：20px；
字体大小：粗体；
文本对齐：左对齐；
利润率：20px 0 15px；
}
表格ul li{
填充：20px 30px；
背景色：#f0；
边缘底部：8px；
盒影：0 1px 1px rgba（0,0,0,0.1）；
光标：指针；
}
表格ul li span{
浮动：对；
}
/*这是一个v-bind“活动”（在同一个级别上）*/
.active{
颜色：白色；
背景色：暗绿色；
}
分部总计{
边框顶部：1px实心rgba（255255,0.5）；
填充：15px 30px；
字体大小：20px；
字体大小：粗体；
文本对齐：左对齐；
颜色：#fff；
}
分区总跨度{
浮动：对；
}
菜单卡米


总费用：
常量菜单=[
{名称：'Cappucino'，价格：35000，有效：true}，
{名称：'绿茶拿铁'，价格：40000，有效期：假}，
{名称：'Fish and chips'，价格：50000，有效期：false}，
{名称：'金枪鱼三明治'，价格：30000，有效期：假}，
{名称：'矿泉水'，价格：8000，有效期：假}，
{名称：'炸薯条'，价格：18000，有效期：假}
]
菜单.forEach（（菜单，价格）=>{
document.getElementById（'menu'）.innerHTML++=“li>”+menu.name++“Rp”+menu.price++“”
});

这应该可以：

const菜单=[{
id:1，
名称：'卡普西诺'，
价格：35000，
主动：正确
},
{
id:2，
名称：“绿茶拿铁”，
价格：40000，
活动：错误
},
{
id:3，
名称：“炸鱼薯条”，
价格：50000，
活动：错误
},
{
id:4，
名称：“金枪鱼三明治”，
价格：30000，
活动：错误
},
{
id:5，
名称：“矿泉水”，
价格：8000，
活动：错误
},
{
id:6，
名称：“炸薯条”，
价格：18000，
活动：错误
}
]
菜单.forEach（（菜单，价格）=>{
const li=document.createElement（'li'）
li.innerHTML=`${menu.name}Rp${menu.price}`
li.addEventListener（'click'，e=>{
li.classList.toggle（'active'）
log（'activeelements'，getActiveCount（））
})
document.getElementById（'menu'）.append（li）
});
函数getActiveCount（）{
const activeListItems=document.querySelectorAll（“#menu li.active”）
返回activeListItems.length
}

在这里，我们将事件侦听器添加到每个元素中，然后再将它们附加到父元素中。另外，请注意，我们使用的是

classList.toggle

，如果列表项中存在

活动的

类，则将其删除，如果不存在，则将其添加

2020年7月10日编辑 要获取活动元素的总价，首先必须将项目价格作为属性添加到每li，您可以使用以下函数：

因此，上述代码变为：

menu.forEach（项=>{
const li=document.createElement（'li'）
li.innerHTML=`${menu.name}Rp${menu.price}`
li.setAttribute（'data-price'，item.price）
li.addEventListener（'click'，e=>{
li.classList.toggle（'active'）
log（'activeelements'，getActiveCount（））
})
document.getElementById（'menu'）.append（li）
});

然后：

函数getTotalPrice（）{ const activeItems=document.querySelectorAll（“#menu li.active”） 返回activeItems.length？Array.from（activeItems）.reduce（（acc，elem）=>acc+=elem.getAttribute（'data-price'），0）：0 }

---

Sir，您是否添加了计算激活元素的函数？（对不起，我语法不好）另外，我是网络新手development@Hanstopz是的，我添加了一个函数来计算活动元素。@NabirAbbas在我尝试这段代码之后，我看起来像“activeListItems.length”一样，计算活动元素的数量并在控制台中放置一个返回值。但是，我如何从数组中计算活动元素的价格（取“价格”）呢？@NabirAbbas应该这样做