这是我的目标：点击之前||用户选择他们想要的项目之后
在我做了一些研究之后，我能够用vue.js
制作这个https://jsfiddle.net/Hanstopz/Lcnxtg51/10/
但是，当我尝试用Plain javascript创建这个时，我被卡住了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form pesanan</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Cookie);
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
form{
background-color: #61a1bc;
border-radius: 2px;
box-shadow: 0 1px 1px #ccc;
width: 400px;
padding: 35px 60px;
margin: 50px auto;
}
form h1{
color:#fff;
font-size:64px;
font-family:'Cookie', cursive;
font-weight: normal;
line-height:1;
text-shadow:0 3px 0 rgba(0,0,0,0.1);
}
form ul{
list-style:none;
font-size:20px;
font-weight:bold;
text-align: left;
margin:20px 0 15px;
}
form ul li{
padding:20px 30px;
background-color:#f0f0f0;
margin-bottom:8px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
cursor:pointer;
}
form ul li span{
float:right;
}
/* ini bagian v-bind 'active' (menambahkan class ini ke li) */
.active{
color: white;
background-color: darkgreen;
}
div.total{
border-top:1px solid rgba(255,255,255,0.5);
padding:15px 30px;
font-size:20px;
font-weight:bold;
text-align: left;
color:#fff;
}
div.total span{
float:right;
}
</style>
</head>
<body>
<form id="main">
<h1>Menu kami</h1>
<ul id="menu">
<!-- {{service.name}} <span>{{service.price | currency}}</span> -->
</ul>
<div class="total">
Total harga:
<!-- Total: <span>{{total() | currency}}</span> -->
</div>
</form>
<script>
const menu = [
{ name: 'Cappucino', price: 35000, active: true },
{ name: 'Green tea latte', price: 40000, active: false },
{ name: 'Fish and chips', price: 50000, active: false },
{ name: 'Tuna sandwich', price: 30000, active: false },
{ name: 'Mineral water', price: 8000, active: false },
{ name: 'French fries', price: 18000, active: false }
]
menu.forEach((menu, price) => {
document.getElementById('menu').innerHTML += "<li>" + menu.name + "<span>" + "Rp " + menu.price + "</span>" + "</li>"
});
</script>
</body>
</html>我设法从数组中创建了显示，但当我点击列表和计算所有活动元素的函数时，我对如何添加活动类感到困惑。。。任何人都请帮帮我。
｛更新｝在我组合了Nabir Abbas的答案后，我可以在活动元素和非活动元素之间进行选择和切换。但我想做一个总数，只要它有一个活动元素，就可以计数。价格将从基于活动链接的阵列中获取。。。所以我试了这个
function totalCount() {
if ($("li").hasClass("active")) {
document.getElementById("subtotal").innerHTML = 0 + $(menu.price);
}}但这似乎不对，有人能帮我吗？
这应该有效：
const menu = [{
id: 1,
name: 'Cappucino',
price: 35000,
active: true
},
{
id: 2,
name: 'Green tea latte',
price: 40000,
active: false
},
{
id: 3,
name: 'Fish and chips',
price: 50000,
active: false
},
{
id: 4,
name: 'Tuna sandwich',
price: 30000,
active: false
},
{
id: 5,
name: 'Mineral water',
price: 8000,
active: false
},
{
id: 6,
name: 'French fries',
price: 18000,
active: false
}
]
menu.forEach((menu, price) => {
const li = document.createElement('li')
li.innerHTML = `${menu.name}<span>Rp ${menu.price}</span>`
li.addEventListener('click', e => {
li.classList.toggle('active')
console.log('Active lements', getActiveCount())
})
document.getElementById('menu').append(li)
});
function getActiveCount() {
const activeListItems = document.querySelectorAll('#menu li.active')
return activeListItems.length
}
在将事件侦听器附加到父元素之前，我们将在执行中向每个元素添加事件侦听器。另外，请注意，我们使用的是classList.toggle，如果列表项上存在active类，它将删除该类，如果不存在，则添加该类
编辑10/7/2020
要获得活动元素的总价，首先必须将商品价格作为属性添加到每li中，您可以使用以下函数：
所以上面的代码变成：
menu.forEach(item => {
const li = document.createElement('li')
li.innerHTML = `${menu.name}<span>Rp ${menu.price}</span>`
li.setAttribute('data-price', item.price)
li.addEventListener('click', e => {
li.classList.toggle('active')
console.log('Active lements', getActiveCount())
})
document.getElementById('menu').append(li)
});
然后：
function getTotalPrice() {
const activeItems = document.querySelectorAll('#menu li.active')
return activeItems.length ? Array.from(activeItems).reduce((acc, elem) => acc+=elem.getAttribute('data-price'), 0): 0
}