Я работаю над страницей сведений о продукте, которая позволяет пользователям выбирать количество продуктов для покупки. У меня в настоящее время циферблат количества работает правильно, но мне нужно использовать эту функцию, чтобы обновить таблицу, в которой отображается общая стоимость покупки.
Таблица, которую необходимо динамически обновлять по мере того, как Пользователи увеличивают или уменьшают количество продукта с помощью кнопок - или +:
<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>
В рамках реализации мне нужно иметь возможность управлять двумя разными переменными:
Управление этими двумя переменными позволит генерировать дисконтированную стоимость (3,95 доллара США), скидку (0,43 доллара США) и общую сумму (стоимость со скидкой за количество X).
Буду признателен за любую помощь в решении этой проблемы.
Я обновил копию вашей демонстрации скрипки. Посмотрите, соответствует ли он вашим требованиям: 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);
}
});
});
Я быстро адаптировал сценарий к следующему: jsfiddle.net/UXEngineer/79xvzn84. Как мы можем добиться, чтобы значение количества начиналось с 0, а также как позволить пользователям также снизить количество до 0?
Исправлено здесь: 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, нажав кнопку -
.
Потрясающие! Большое спасибо за вашу помощь!
Привет, Сватантра, я попытался добавить в дизайн дополнительную функцию, которая отображает количество элементов, добавленных в корзину, но только после нажатия кнопки. Просмотрите его здесь: jsfiddle.net/UXEngineer/79xvzn84. Как отобразить количество добавленных элементов после того, как пользователь нажмет кнопку, как показано в jsfiddle?
Я не думал, что ты вернешься! Я посмотрел на JSFiddle выше, и это именно то, что я искал! Ты восхитителен! Спасибо!
После создания пользовательского интерфейса я решил переместить функции и добавил количество элементов к кнопке оформления заказа. Кроме того, я также добавил общую стоимость товаров, добавленных в корзину, но, несмотря на мои попытки следовать вашему примеру, я продолжаю получать ошибку NaN. Вы можете помочь с этой последней функцией? Вот JSFIDDLE: jsfiddle.net/UXEngineer/79xvzn84/60
Я думаю, что эти проблемы не связаны с исходным постом. Вы должны опубликовать еще один вопрос, объясняющий, чем ваша новая проблема отличается от этой.
Это почти то, чего я ожидал. Результаты, приведенные в таблице, верны, но цена за единицу (была 4,35 доллара со скидкой 10%) и цена со скидкой ниже (3,92 доллара) должны остаться неизменными. Это ссылка, которую Пользователь будет иметь по обычным ценам и ценам со скидкой. Когда Пользователь изменяет количество, значения меняются, как и у вас сейчас.