Возможно ли?
Дано:
на странице после поиска позиции отображаются по такому принципу - каждая в своем диве с уникальным id из базы. Пример. <div class="tovar" id="41"> <div class="tovar-image"> <img src="/img/b/f1.jpg"> </div> <div class="tovar-name"> Патрик<br> </div> <div class="tovar-inside-and-size"> (гелий, 80х60 см) </div> <div class="tovar-price"> 280 руб/шт </div> <div class="numbers"><span class="minus"></span><input id="41" type="text" value="1" size="3"><span class="plus"></span><span class="check"></span> </div> </div> Необходимо: при нажатии на span class="check" вызывается функция подсчета общей суммы (значение из родительского class="tovar-price" умножается на значение родительского input. Как описать функцию? ) Вопрос номер 2: делать все же подобные вещи лучше на аякс? |
Я обычно играюсь так
echo '<span id="сheck'.$id.'" class="check"></span>' Потом при клике, отделяю сам id. А зная id, можно показывать или обрабатывать как угодно и что угодно. Цитата:
|
Цитата:
Надо взять цену из "tovar-price", умножить на количество из "value", получив тем самым число... но! это все должно быть взято именно из этого div class=tovar с уникальным своим id! |
Ну во первых у вас два элемента с одинаковым id.
<div class="tovar" id="41"> <input id="41" type="text" value="1" size="3"> |
Цитата:
|
<div class="tovar" id="41">
<div class="tovar-image"><img src="/img/b/f1.jpg"></div>
<div class="tovar-name">Патрик<br></div>
<div class="tovar-inside-and-size">(гелий, 80х60 см)</div>
<div class="tovar-price">280 руб/шт</div>
<div class="numbers">
<span class="minus"> - </span><input id="41" type="text" value="1" size="3"><span class="plus"> + </span><span class="check">Клик сюда!</span>
</div>
</div>
<div class="tovar" id="42">
<div class="tovar-image"><img src="/img/b/f1.jpg"></div>
<div class="tovar-name">Патрик<br></div>
<div class="tovar-inside-and-size">(гелий, 80х60 см)</div>
<div class="tovar-price">280 руб/шт</div>
<div class="numbers">
<span class="minus"> - </span><input id="42" type="text" value="2" size="3"><span class="plus"> + </span><span class="check">Клик сюда!</span>
</div>
</div>
<script>
var goods = document.getElementsByClassName('tovar');
for (var i = 0; i < goods.length; i++) {
goods[i].getElementsByClassName('check')[0].onclick = (function(thisGood) {
return function() {
alert(parseFloat(thisGood.getElementsByClassName('tovar-price')[0].innerHTML) * thisGood.getElementsByTagName('input')[0].value);
}
})(goods[i])
}
</script>
|
Я покажу в JQuery, потому что в JS я буду полдня писать.. но смысл вы поймёте.
<div class="tovar" id="div41"> <div class="tovar-image"> <img src="/img/b/f1.jpg"> </div> <div class="tovar-name"> Патрик<br> </div> <div class="tovar-inside-and-size"> (гелий, 80х60 см) </div> <div class="tovar-price"><span class="product_price_41"> 280</span> руб/шт </div> <div class="numbers"><span class="minus"></span><input id="product_amount_41" type="text" value="1" size="3"><span class="plus"></span><span id="41" class="check">get totalprice</span> </div> </div>
$('.check').click(function(){
var product_id = this.id;
var product_amount = $('#product_amount_' + product_id).val();
var product_price = $('#product_price_' + product_id).val();
});
Зная эти величины, теперь можно складывать и вычитать.. на ваш вкус. |
Цитата:
Цитата:
|
:) Согласен, напортачил.
$(".product_price_" + product_id + "")
Какая внимательность! )) |
Стопанулся на этапе:
http://jsfiddle.net/Mv6u6/2/ Необходимо чтобы при нажатии на ссылку брались значения ТОЛЬКО из родителельских дивов в их же пределах. Что нужно дописать в код для выполнения этого обязательного условия? ps.Это список товаров в магазине и ссылка будет в будущем формировать общую сумму (кол-во * цену). Соотв, там много таких дивов и получается, надо как-то определять родителя, а потом уже в нем объявлять эти переменные... вот только как это сделать.. уже кажется что все перепробовал. |
Цитата:
Тем самым на выходе кода буду иметь уже готовые разные id с номерами... хм.. а потом уже только с ними и работать. Тогда и определять никаких родителей не надо :) Правильно? :dance: Или я уже сам себя перехитрить пытаюсь? |
Цитата:
НО! Описанный вами метод не работает, а именно скрипт пишет уже в самом начале в var product_id пустоту! Поэтому и не работает дальше... Что в строке var product_id = this.id; не так?? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function (){
$('.check').click(function (){
var o=this.parentNode.parentNode;
var sum=$(o).find('.tovar-price > span').text();
var n=$(o).find('.numbers > input').val();
alert(sum*n);
});
});
</script>
</head>
<body>
<div class="tovar" id="41">
<div class="tovar-image">
<img src="/img/b/f1.jpg">
</div>
<div class="tovar-name">
Патрик<br>
</div>
<div class="tovar-inside-and-size">
(гелий, 80х60 см)
</div>
<div class="tovar-price">
<span>280</span> руб/шт
</div>
<div class="numbers">
<span class="minus">-</span>
<input id="41" type="text" value="1" size="3">
<span class="plus">+</span>
<span class="check">=</span>
</div>
</div>
</body>
</html>
|
Цитата:
Прошу прощения за кривость html, но это чтоб быстрее показать что ВСЁ РАБОТАЕТ! )))) Спасибище! http://jsfiddle.net/Mv6u6/4/ ps. Два дня изучаю яву+jq и это что-то с чем-то я скажу Вам, когда после нескольких часов получаешь рабочий код.... )))) да вы и сами наверное знаете )) |
this.parentNode.parentNode - это не совсем правильный путь. Он жестко привязывает код к верстке. Логичнее было бы наоборот идти сверху вниз - сначала собрать в массив товар, а затем навешивать калькуляторы на каждый.
Цитата:
|
В качестве бонуса можно попросить допилить немного код
http://jsfiddle.net/Mv6u6/4/ на проверку чтобы в input не было левых символов (буквы, отрицательные итп) только числа от 1 до 999. В противном случае возвращалась бы ошибка строкой. ??? Можно конечно отправить меня читать основы... как вариант )))) |
Цитата:
http://jsfiddle.net/Mv6u6/4/ Спасибо!!! |
Цитата:
Работает до первого редизайна, а затем верстальщику придется искать, почему перестало работать |
Допилил код на проверку данных в input (переменная n количество товара) - должна быть только целым числом >= 1.
Вот код: http://jsfiddle.net/Mv6u6/5/ Последний вопрос - всё ли я учел? Или есть вариант более корректный? |
Цитата:
|
Цитата:
Но порой HTML генерируется не по вашему сценарию (например CMS), и тогда уже надо уметь работать с теми селекторами, которые есть. |
С этой стадией разобрался... теперь сижу ломаю голову как написать следующий скрипт.
Имеется функция, которая по клику считает переменную sumTovar. Каким образом при следующем клике по этой функции я смогу получить новую переменную, содержащую старое значение sumTovar + новое её значение??? И так каждый раз, когда я вызываю эту функцию. Все время к сумме старых sumTovar прибавлялось бы новое только что рассчитанное. Понимаю, что цикл... но никак не выходит........ |
Цитата:
|
Я так понимаю это актуальная версия вашего скрипта?
$(function (){
$('.check').click(function (){
var o=this.parentNode.parentNode;
var sum=$(o).find('.tovar-price > span').text();
sum = parseInt(sum, 10);
var n=$(o).find('.numbers > input').val();
if (!n, n<=0) {
alert ("Вы выбрали неверное число");
exit;
}
else
alert(sum*n);
});
});
Зачем вам второй скрипт тогда? Добавьте внутри события click проверку на существование значения в sumTovar - если значение не существует то переменной присвойте ноль. Если существует, то присваете переменной это значение. В конце сложить. Цитата:
|
Цитата:
Как вариант...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function inc(Obj) {
var n=Obj.getAttribute('data-sum');
Obj.setAttribute('data-sum',++n);
alert(n);
};
</script>
</head>
<body>
<button onclick='inc(this);'>Test</button>
</body>
</html>
|
Цитата:
Программированием не занимался никогда и посмотрел несколько уроков - сижу осваиваю самостоятельно. Еще ни читал Ваши ответы, но идея кстати возникла - создавать массив через цикл, куда записывать сразу 1) сумму за товар 2) его название. Все же мне кажется почему-то удобнее потом этот вид будет для представления в корзине, ну и суммировать можно значения в нём же. Как считаете? Коды не прошу - додуматься хочу сам. |
Мне кажется, вам надо сначало продумать ваши шаги до самого конца: какие варианты действий будут у пользователей, какие данные нужны вам выделить при определённых действиях, куда эти данные записать и тд. А потом уже реализовывать технически ваши планы.
Например. Готовая сумма (сумма к уплате) - это результатные данные (производный продукт), его записывать в БД не нужно. Что нужно точно? Id продукта, Id покупателя, Id заказа, количество продукта. И это всё что вам надо знать для заказа. Работайте с этими данными, а не с производным результатами. |
Chekist, массив "живет" до первой перезагрузки страницы... Или до первой смены страницы...
Корзину "хранить" лучше: - на сервере (если известен пользователь) - в сессии - в куках |
| Часовой пояс GMT +3, время: 07:03. |