Суммирование чисел
Добрый день. У меня на странице есть вот такой html код:
<div class="summa"></div> <div class="product1"> <div class="price">100</div> <a data-id="633" class="buy-now" onclick="return cart.add(this)">Купить</a> </div> <div class="product2"> <div class="price">200</div> <a data-id="632" class="buy-now" onclick="return cart.add(this)">Купить</a> </div> Мне необходимо, чтобы при клике на гипперссылку в блок summa выходило число из блока price. Подскажите пожалуйста, кто делал подобное. В блоке summa может быть ничего или любое число. |
Янковиц,
<div class="summa"></div> <div class="product1"> <div class="price">100</div> <a data-id="633" class="buy-now" onclick="add(this)">Купить</a> </div> <div class="product2"> <div class="price">200</div> <a data-id="632" class="buy-now" onclick="add(this)">Купить</a> </div> <script> function add(elem) { document.getElementsByClassName('summa')[0].innerHTML = elem.parentElement.getElementsByClassName('price')[0].innerHTML; } </script> Только странно: ни выбора продуктов, ни количеств... Голое число, неизвестно к чему относящееся И где же суммирование? Цитата:
|
Это лишь часть кода. Количество и т.д. все уже работает. Осталась только корзина. Здорово, но немного не то. Нужно, чтобы суммировались числа. Кликнул по одной(+100), добавляет в блок summa 100, кликнул по другой (+200), стало в блоке summa 300. И так далее. Извините если неясно выразился.
|
<div class="summa"></div> <div class="product1"> <div class="price">100</div> <a data-id="633" class="buy-now" onclick="add(this)">Купить</a> </div> <div class="product2"> <div class="price">200</div> <a data-id="632" class="buy-now" onclick="add(this)">Купить</a> </div> <script> function add(elem) { var res = document.getElementsByClassName('summa')[0], price = parseInt(elem.parentElement.getElementsByClassName('price')[0].innerHTML), sum = parseInt(res.innerHTML) | 0; res.innerHTML = sum + price; } </script> |
:dance: :thanks:
|
<a data-id="632" class="buy-now" data-price="XXX" onclick="return cart.add(this)">Купить</a>
Зачем тревожить другие элементы, если в функцию передается this, которое и само с успехом может хранить цену. |
laimas,
В этом коде и все остальное не имеет особого смысла, так что... |
Цитата:
|
Вот так работает:
<a data-id="632" class="buy-now" data-price="XXX" onclick="add(this)">Купить</a> а так нет <a data-id="632" class="buy-now" data-price="XXX" onclick="return cart.add(this)">Купить</a> А в чем разница? И если data-price="XXX" лучше, как это реализовать? |
Зачем вот это data-id="632"? Уж точно это ID товара и используется в скрипте, точно также атрибутом data-price можно передавать с скрипт и цену товара.
|
Это все понимаю, но в javascript я полный ноль. Получение данных их data-price также как document.getElementsByClassName? Кстати говоря ID товара я изначально не знаю.
|
Вам и не нужно знать ID товара, вам нужно оперировать ID, точно также как и ценой. Добавление товара в корзину, это как раз поместить в нее ID товара и его количество, цена товара при этом в корзине может и отсутствовать.
У вас прописано onclick="return cart.add(this)", то есть в функцию передается ссылка на сам объект, что в самой функции будет ее аргументом. Вот этот аргумент и хранит все свои атрибуты, которые и нужно получать, и которые в скрипте думаю получают (ID товара). Использовать document.getElementsByClassName и прочее нет необходимости, как и совсем не понятно к чему приляпан return. Вы функцию эту хотя бы по коду нашли и показали. |
Теперь совсем запутался. Дело в тос, что если я не использую onclick="return cart.add(this)", то при нажатии на кнопку "Купить" происходит переадресация в корзину, чего очень не хотелось бы. А вот сам скрипт отмены переадресации и добавления товара в корзину.
script> var cart = {}; $(document).ready(function(){ cart.add = function(btn) { var $btn = $(btn); var productId = $btn.data('id'); $.get('/cart?add=' + productId, function() { }); return false; }; });</script> |
Ну если используется jQuery, то в thml:
<a data-id="633" data-price="тут_цена_товара" class="buy-now" Цена указанная в DIV только для информации пользователю. В JS: $(document).ready(function(){ все касаемо функции cart.add выбросить, ну или тогда уж ООП и методы }; и так: $(document).ready(function(){ $('a[data-id]').click(function(e) { e.preventDefault(); //только если кнопка имеет атрибут href, иначе не надо var b = $(this); $.get('/cart?add=' + b.data('id'), function(data) { //если после ответа сервера нужно считать сумму набранного, //то цена этого товара = +b.data('price') }); //а если посчитать не дожидаясь ответа, то все равно цена, это +b.data('price') //считайте на здоровье, собственно и сервер мог бы готовый расчет вернуть //в зависимости от того, добавлен или нет товар в корзину, //а серверу не нужна цена от клиента, он ее знает сам }); }); |
Жаль, но не получилось :(
|
Получилось следующее:
<div class="product-basket"></div> <div class="product1"> <div class="price">100</div> <a data-id="633" class="buy-now" onclick="return cart.add(this)" onmousedown="add(this)">Купить</a> </div> <div class="product2"> <div class="price">200</div> <a data-id="632" class="buy-now" onclick="return cart.add(this)" onmousedown="add(this)">Купить</a> </div> <script> function add(elem) { var res = document.getElementsByClassName('product-basket')[0], price = parseInt(document.getElementsByClassName('price')[0].innerHTML), sum = parseInt(res.innerHTML) | 0; res.innerHTML = sum + price; } </script> Так как без onclick="return cart.add(this)" я обойтись не могу, пришлось добавить еще одно событие onmousedown. Считает... Но сумму берет только из первого:( |
Цитата:
Поместите на любую свою страницу имеющую прокрутку по вертикали в самый ее низ вот такое: <a>GO</a> Первое - это уже не ссылка, и курсор у тега А будет "по умолчанию", и второе - щелкните по этой "ссылке". Все правильно, даже не дергается. Все правильно, нет у этой "ссылки" действия по умолчанию, а значит и вашим "ссылкам" return cart.add(this) и функции return false; как мертвому припарка. Показывайте то что пытались сделать, и три вопроса: 1) есть ли у блоков <div class="product1"> ... </div> и т.д. общий ближайший родитель, но не body? 2) на чем базируется корзина на сервере - сессия, база или иное? 3) какова структура корзины и каков механизм добавления товаров в нее? |
Laimas, не ругайтесь пожалуйста. Вам php код нужен? Понимаете, работа корзины уже прекрасно работает. Все считает, передаёт данные покупок в бд, оформляет заказ. Мне лишь нужно простой скрипт для front-end, чтобы команда выполнялась на стороне клиента а не сервера. То есть, чтобы кликая на ссылку, скрипт мог вывести сумму в отдельном месте. Все, остальное не нужно.
У блоков div есть родительский блок, это блок div class="parent". |
А кто сказал что я ругаюсь? Я лишь говорю, что вы занимаетесь хрен знает чем?
Цитата:
работа корзины уже прекрасно работает. Все считает, передаёт данные покупок в бд, оформляет заказ. - я уже говорил, что если сервер все считает, и добавление товара в корзину, это асинхронный запрос сервера, то считать на клиенте, это не есть необходимость, ибо нормальная корзина прежде чем добавить товар, проверит, есть ли такой в базе, и есть ли в наличии. И уж коли ваша корзина "все считает", то сумму товаров в корзине ей раз плюнуть вернуть клиенту в ответ на запрос, а клиенту его показать, вот тут: $.get('/cart?add=' + b.data('id'), function(data) { //в data ответ сервера - сумма товаров в корзине $('.product-basket').tetx(data) }); |
Цитата:
|
Цитата:
Если структура вашей корзины построена грамотно, то количество товаров в корзине это array_sum(array_column($basket, 'count')), а сумма все товаров в ней array_sum(array_map('array_product', $basket)). Чего тут считать то? Цитата:
Корзину то ведь у вас на сервере, добавление товара это ведь все равно запрос сервера, и к чему тогда "философия о нагрузке" неуместная? |
Ладно. Спасибо за помошь. По правде говоря для меня array_sum и т.д. и т.п., что мертвому припарка:)
|
JS вы не знаете, РНР тоже, чего же вы пытаетесь написать?
Я вам показывал код как получить цену товара, источником которой является сама ссылка. От вас нужно было только сложить ее с суммой в корзине. Я за вас не буду этого писать, ибо я не знаю когда она должна считаться - сразу или все таки по ответу сервера как по условию. Но вы сами, видимо, и этого не знаете. И чего вы ждете? Если не читать о функциях, то конечно и не будет знаний по ним. А сложного в них ничего нет - читайте, это необходимо знать коли хотите что-то написать. |
Часовой пояс GMT +3, время: 00:36. |