Значения таблиц, управляемых Javascript

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

Вот ДЕМО на JSFiddle

Таблица, которую необходимо динамически обновлять по мере того, как Пользователи увеличивают или уменьшают количество продукта с помощью кнопок - или +:

<div class = "col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id = "pricing-summary">
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">Qty.</div>
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">Unit Price</div>
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">Discount</div>
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">Total</div>
  </div>
  <div class = "clearfix pt8"></div>
  <div id = "pricing-breakdown">
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">$quantity</div>
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">4.35</div>
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">$0.40</div>
    <div class = "col-lg-3 col-md-3 col-sm-3 col-xs-3">$3.95</div>
  </div>
</div>

В рамках реализации мне нужно иметь возможность управлять двумя разными переменными:

  1. цена за единицу (4,35 доллара США)
  2. процент скидки (10% = (цена за единицу x скидка))

Управление этими двумя переменными позволит генерировать дисконтированную стоимость (3,95 доллара США), скидку (0,43 доллара США) и общую сумму (стоимость со скидкой за количество X).

Буду признателен за любую помощь в решении этой проблемы.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я обновил копию вашей демонстрации скрипки. Посмотрите, соответствует ли он вашим требованиям: http://jsfiddle.net/m4n8xe3r/75/

Решение ниже:

$(document).ready(function() {

  var quantitiy = 0;
    var unitPrice = 4.35;
  var discount = 0.1;

    var updatePriceTable = (quantity) => {
    totalPrice =  Number(quantity * unitPrice).toFixed(2);
    totalDiscount = Number(totalPrice * discount).toFixed(2);
    finalPrice = Number(totalPrice - totalDiscount).toFixed(2);
    $('#totalQuantityElem').text(quantity);
    $('#totalPriceElem').text(totalPrice);
    $('#totaldiscountElem').text(totalDiscount);
    $('#finalPriceElem').text(finalPrice);
    $('#totalPriceHeaderElem').text(totalPrice);
    $('#finalPriceHeaderElem').text(finalPrice);
  }


  $('.quantity-right-plus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) + 1;
        $('#quantity').val(quantity);
        updatePriceTable(quantity);
  });

  $('.quantity-left-minus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    var quantity = parseInt($('#quantity').val()) - 1;
    if (quantity > 0) {
      $('#quantity').val(quantity);
      updatePriceTable(quantity);
    }  
  });

});

Это почти то, чего я ожидал. Результаты, приведенные в таблице, верны, но цена за единицу (была 4,35 доллара со скидкой 10%) и цена со скидкой ниже (3,92 доллара) должны остаться неизменными. Это ссылка, которую Пользователь будет иметь по обычным ценам и ценам со скидкой. Когда Пользователь изменяет количество, значения меняются, как и у вас сейчас.

Marcelo Martins 12.09.2018 23:58

Я быстро адаптировал сценарий к следующему: jsfiddle.net/UXEngineer/79xvzn84. Как мы можем добиться, чтобы значение количества начиналось с 0, а также как позволить пользователям также снизить количество до 0?

Marcelo Martins 13.09.2018 00:04

Исправлено здесь: jsfiddle.net/79xvzn84/16. Чтобы начать с 0 или 1 количества, вы можете обновить атрибуты min и value этого элемента (значение означает начальное значение): <input type = "text" id = "quantity" name = "quantity" class = "form-control text-center fw6" value = "0" min = "0" max = "100"> Пользователь может установить количество на 0, нажав кнопку -.

ImGroot 13.09.2018 01:09

Потрясающие! Большое спасибо за вашу помощь!

Marcelo Martins 13.09.2018 21:12

Привет, Сватантра, я попытался добавить в дизайн дополнительную функцию, которая отображает количество элементов, добавленных в корзину, но только после нажатия кнопки. Просмотрите его здесь: jsfiddle.net/UXEngineer/79xvzn84. Как отобразить количество добавленных элементов после того, как пользователь нажмет кнопку, как показано в jsfiddle?

Marcelo Martins 13.09.2018 23:41

Я не думал, что ты вернешься! Я посмотрел на JSFiddle выше, и это именно то, что я искал! Ты восхитителен! Спасибо!

Marcelo Martins 17.09.2018 16:26

После создания пользовательского интерфейса я решил переместить функции и добавил количество элементов к кнопке оформления заказа. Кроме того, я также добавил общую стоимость товаров, добавленных в корзину, но, несмотря на мои попытки следовать вашему примеру, я продолжаю получать ошибку NaN. Вы можете помочь с этой последней функцией? Вот JSFIDDLE: jsfiddle.net/UXEngineer/79xvzn84/60

Marcelo Martins 19.09.2018 17:05

Я думаю, что эти проблемы не связаны с исходным постом. Вы должны опубликовать еще один вопрос, объясняющий, чем ваша новая проблема отличается от этой.

ImGroot 19.09.2018 19:39

Другие вопросы по теме