Подсчет промежуточного итога из списка выберите опцию, основанную на щелкнутом ("активном") элементе


Подсчет промежуточного итога из списка выберите опцию, основанную на щелкнутом ("активном") элементе

07.10.2020 07:44:53 Просмотров 34 Источник

Это моя цель: Прежде чем что-либо щелкнуло | / после того, как пользователь выбрал нужный ему элемент

После того, как я провел некоторые исследования, я смог сделать это с помощью vue.js
https://jsfiddle.net/Hanstopz/Lcnxtg51/10/

Но, когда я попытался создать это с помощью простого 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>

мне удалось создать отображение из массива, но я запутался в том, как добавить активный класс, когда я нажимаю на список и функцию для вычисления всех активных элементов... Кто-нибудь, пожалуйста, помогите мне.

{UPDATE} после того, как я объединил ответ от Набира Аббаса, я могу выбирать и переключаться между активным и неактивным элементом. Но я хочу сделать итог, который можно подсчитать всякий раз, когда у него есть активный элемент. Цена будет взята из массива на основе активной ссылки... поэтому я попробовал это сделать

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

но это кажется неправильным, может ли кто-нибудь мне помочь?

У вопроса есть решение - Посмотреть?

Ответы - Подсчет промежуточного итога из списка выберите опцию, основанную на щелкнутом ("активном") элементе / Count the subtotal from list select option, based on clicked (' active ') element

Является ответом!
Nadir Abbas

07.10.2020 08:01:45

Это должно сработать:

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

Чтобы получить общую цену активных элементов, сначала вам нужно добавить цену элемента в качестве атрибута к per 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
}
Помочь в развитии проекта:
Закрыть X