Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/18: Рейтинг темы: голосов - 18, средняя оценка - 4.78
0 / 0 / 0
Регистрация: 24.05.2018
Сообщений: 91

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

19.09.2018, 15:38. Показов 3567. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Вот что у меня получилось
HTML5
1
2
3
4
5
6
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    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 счетчиков считается значение первого товара (так вот я запутался и не могу сообразить как сделать чтобы работало отдельно у первого товара и у второго) помогите пожалуйста!
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
19.09.2018, 15:38
Ответы с готовыми решениями:

Калькулятор расчета стоимости
Здравствуйте. Помогите посчитать конечную стоимость товара. Я вывожу из бд через php цену за 1 кв. м. и название товара в select. У меня...

Калькулятор подсчёта стоимости игры
Подскажите пожалуйста код калькулятора который подсчитывает стоимость одного слота игры + период аренды и выдаёт на показ одну целую сумму....

Калькулятор расчета стоимости системы отопления
калькулятор расчета стоимости системы отопления. Добрый день помогите сделать калькулятор. Есть табличка в excel оно все там считает....

7
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
19.09.2018, 17:42
Лучший ответ Сообщение было отмечено SANTA000 как решение

Решение

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    $('.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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/
1
0 / 0 / 0
Регистрация: 24.05.2018
Сообщений: 91
19.09.2018, 17:46  [ТС]
Спасибо большое
0
0 / 0 / 0
Регистрация: 24.05.2018
Сообщений: 91
20.09.2018, 12:31  [ТС]
еще 1 вопрос назрел)
есть вот такой <div> который идет сразу после таблицы
HTML5
1
2
3
<div class="summ">
      <b>Сумма:</b><span></span>
    </div>
не подскажете, как в него записать сумму итоговых сумм всех элементов. Если их будет не 2, а n?
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
20.09.2018, 14:11
JavaScript
1
2
3
4
5
var tsum = 0;
$('td.total').each(function(){
   tsum += parseInt($(this).text());
});
$('div.sum').text(tsum);
0
0 / 0 / 0
Регистрация: 24.05.2018
Сообщений: 91
20.09.2018, 14:32  [ТС]
не работает при изменении количества товаров

Добавлено через 5 минут
(счетчика)
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
22.09.2018, 16:00
http://jsfiddle.net/xpvt214o/838574/
там селектор просто не тот вписал
1
0 / 0 / 0
Регистрация: 24.05.2018
Сообщений: 91
22.09.2018, 16:04  [ТС]
Спасибо, по другой теме не могли бы проконсультировать?
Работа с словарем в jquery
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
22.09.2018, 16:04
Помогаю со студенческими работами здесь

Создать калькулятор расчета стоимости автомобильных кресел
Как сделать такой калькулятор. При выборе нужных элементов как на сайте avtobm.ru

Калькулятор подсчет стоимости товара
Всем привет! Помогите пожалуйста, мне нужно сделать на JS калькулятор, вроде бы все просто, а вот не получается, может кто поможет! ...

Не работает калькулятор стоимости товара
Здравствуйте! Есть простой калькулятор стоимости товара, конечная цена зависит от выбранных параметров. В выпадающем списке...

Расчет стоимости товара
помогите реализовать расчет стоимости товара. пример с сайта https://stroybloc.ru/catalog/wall_blocks/ вот этот блок...

Расчет стоимости товара
Здравствуйте! Сразу перехожу к проблемному месту. Есть две input-строки в html-документе: &lt;input type=&quot;text&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru