根据单击的 (' active ') 元素从列表选择选项中计算小计

Question

This is my goal: Before anything clicked ||这是我的目标：在点击任何东西之前|| After user select the item that they want用户选择他们想要的项目后

After i done some research, i was able to make this with vue.js在我做了一些研究之后，我能够用 vue.js 做到这一点
https://jsfiddle.net/Hanstopz/Lcnxtg51/10/ https://jsfiddle.net/Hanstopz/Lcnxtg51/10/

But, when i trid to create this with Plain javascript, i was stuck但是，当我尝试使用普通 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>

i managed to create the display from array, but i get confused on how do i add an active class when i click on the list and a function to calculate all active element... Anyone please help me.我设法从数组创建了显示，但是当我单击列表和计算所有活动元素的函数时，我对如何添加活动类感到困惑...请任何人帮助我。

{UPDATE} after i combined the answer from Nabir Abbas, i can select and toggle between active and not active element. {更新} 在我结合 Nabir Abbas 的答案后，我可以选择并在活动元素和非活动元素之间切换。 But i wanna make a total that can be counted whenever it has an active element.但我想制作一个总数，只要它有一个活动元素就可以计算出来。 The price would be taken from the array based on active link... so i tried this价格将从基于活动链接的数组中获取......所以我尝试了这个

 function totalCount() { if ($("li").hasClass("active")) { document.getElementById("subtotal").innerHTML = 0 + $(menu.price); }}

but it does not seems right, can anyone help me?但似乎不对，有人可以帮助我吗？

Answer 1

This should work:这应该有效：

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
}

Here we are adding the event listener to per element on the go before appending them to the parent.在这里，我们将事件侦听器添加到移动中的每个元素，然后再将它们附加到父元素。 Also, notice we are using classList.toggle which removes the active class if it exists on the list item and adds it if it doesn't另外，请注意我们正在使用classList.toggle如果列表项中存在active类，它会删除active类，如果不存在则添加它

Edit 10/7/2020编辑 10/7/2020

To get the total price of the active elements, first you have to add the item price as an attribute to per li, you can use the following function:要获得活动元素的总价格，首先必须将商品价格作为属性添加到 per li，您可以使用以下函数：

so the above code becomes:所以上面的代码变成了：

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)
  
});

Then:然后：

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
}

根据单击的 (' active ') 元素从列表选择选项中计算小计

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-07 05:01:45

Edit 10/7/2020编辑 10/7/2020

根据单击的 (&#39; active &#39;) 元素从列表选择选项中计算小计

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-07 05:01:45

Edit 10/7/2020编辑 10/7/2020

根据单击的 (' active ') 元素从列表选择选项中计算小计

解决方案1
1 已采纳 2020-10-07 05:01:45