Калькулятор стоимости товара

@SANTA000 · Регистрация: 24.05.2018

Author24 — интернет-сервис помощи студентам

Вот что у меня получилось

HTML5

<td class="amount"><div class="plus"><i class="fas fa-plus"></i></div><input type="text" id="amount_id" value="1"><div class="minus"><i class="fas fa-minus"></i></div></td>
          <td class="price" id="price" data-value="1500" data-id="1">1500</td>
          <td class="total" id="total-price">1500</td>
<td class="amount"><div class="plus"><i class="fas fa-plus"></i></div><input type="text" id="amount_id" value="1"><div class="minus"><i class="fas fa-minus"></i></div></td>
          <td class="price" id="price" data-value="1700" data-id="2">1700</td>
          <td class="total" id="total-price">1700</td>

вот отрывок 2 строк калькулятора стоимости (2 товаров)

Javascript

    var totalPricHolder = $('#total-price');
    var priceHolder = $('#price').data('value');
    $('.minus').click(function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        totalPricHolder.text(priceHolder * count);
     
        return false;
    });
    $('.plus').click(function () {
        var $input = $(this).parent().find('input');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        totalPricHolder.text(priceHolder * parseInt($input.val()));
        return false;          
    });

А вот сама Jquery, но при нажатии на любой из 2 счетчиков считается значение первого товара (так вот я запутался и не могу сообразить как сделать чтобы работало отдельно у первого товара и у второго) помогите пожалуйста!

@Уф · 19.09.2018, 17:42

Javascript

    $('.minus').click(function () {
        var priceHolder = $(this).parents('td').siblings('.price').data('value');
        var totalPricHolder = $(this).parents('td').siblings('.total');
 
        var $input = $(this).siblings('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        totalPricHolder.text(priceHolder * count);
     
        return false;
    });
    $('.plus').click(function () {
        var priceHolder = $(this).parents('td').siblings('.price').data('value');
        var totalPricHolder = $(this).parents('td').siblings('.total');
        var $input = $(this).siblings('input');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        totalPricHolder.text(priceHolder * parseInt($input.val()));
        return false;          
    });

не используй в блоках одинаковые id, плюс ты забыл сгрупировать все по строчка и поэтому поиск родителя находит вообще все поля, а не только те которые надо

HTML5

<table>
<tr>
<td class="amount">
<div class="plus"><i class="fas fa-plus"></i></div>
<input type="text" id="amount_id" value="1">
<div class="minus"><i class="fas fa-minus"></i></div>
</td>
<td class="price" id="price" data-value="1500" data-id="1">1500</td><td class="total" id="total-price">1500</td>
</tr>
<tr>
<td class="amount">
<div class="plus"><i class="fas fa-plus"></i></div>
<input type="text" id="amount_id" value="1">
<div class="minus"><i class="fas fa-minus"></i></div>
</td>
<td class="price" id="price" data-value="1700" data-id="2">1700</td>
<td class="total" id="total-price">1700</td>
</tr>
</table>

id можешь убрать и оставить классы

Добавлено через 7 секунд
http://jsfiddle.net/xpvt214o/820329/

@SANTA000 · 19.09.2018, 17:46 **[ТС]**

Спасибо большое

@SANTA000 · 20.09.2018, 12:31 **[ТС]**

еще 1 вопрос назрел)
есть вот такой <div> который идет сразу после таблицы

HTML5

1
2
3

<div class="summ">
      <b>Сумма:</b><span></span>
    </div>

не подскажете, как в него записать сумму итоговых сумм всех элементов. Если их будет не 2, а n?

@Уф · 20.09.2018, 14:11

Javascript

var tsum = 0;
$('td.total').each(function(){
   tsum += parseInt($(this).text());
});
$('div.sum').text(tsum);

@SANTA000 · 20.09.2018, 14:32 **[ТС]**

не работает при изменении количества товаров

Добавлено через 5 минут
(счетчика)

@Уф · 22.09.2018, 16:00

http://jsfiddle.net/xpvt214o/838574/
там селектор просто не тот вписал

@SANTA000 · 22.09.2018, 16:04 **[ТС]**

Спасибо, по другой теме не могли бы проконсультировать?
Работа с словарем в jquery

@SANTA000 0 / 0 / 0 Регистрация: 24.05.2018 Сообщений: 91
	19.09.2018, 17:46 [ТС]	3
	Спасибо большое 0

@SANTA000 0 / 0 / 0 Регистрация: 24.05.2018 Сообщений: 91
	20.09.2018, 14:32 [ТС]	6
	не работает при изменении количества товаров Добавлено через 5 минут (счетчика) 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	22.09.2018, 16:00	7
	http://jsfiddle.net/xpvt214o/838574/ там селектор просто не тот вписал 1

@SANTA000 0 / 0 / 0 Регистрация: 24.05.2018 Сообщений: 91
	22.09.2018, 16:04 [ТС]	8
	Спасибо, по другой теме не могли бы проконсультировать? Работа с словарем в jquery 0

Калькулятор стоимости товара

Решение