Форум

Chekist · #11 (**permalink**) 05.11.2013, 09:35

Сообщение от Faab

Согласен, напортачил.

$(".product_price_" + product_id + "")

Какая внимательность! ))

Я кажется понял Вашу логику... добавлять id товара в строку класса id полей цены и количества на стадии формирования документа (в php).
Тем самым на выходе кода буду иметь уже готовые разные id с номерами...
хм.. а потом уже только с ними и работать. Тогда и определять никаких родителей не надо

Правильно?

Или я уже сам себя перехитрить пытаюсь?

Chekist · #12 (**permalink**) 05.11.2013, 09:51

Сообщение от Faab

$('.check').click(function(){
     var product_id = this.id;
     var product_amount = $('#product_amount_' + product_id).val();
     var product_price = $('#product_price_' + product_id).val();
});

Зная эти величины, теперь можно складывать и вычитать.. на ваш вкус.

Переделал: http://jsfiddle.net/Mv6u6/3/
НО!
Описанный вами метод не работает, а именно скрипт пишет уже в самом начале в var product_id пустоту! Поэтому и не работает дальше...
Что в строке var product_id = this.id; не так??

ksa · #13 (**permalink**) 05.11.2013, 09:54

Сообщение от Chekist

при нажатии на span class="check" вызывается функция подсчета общей суммы (значение из родительского class="tovar-price" умножается на значение родительского input.

Как описать функцию? )

Предложу такой вариант...

<!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>

Chekist · #14 (**permalink**) 05.11.2013, 10:10

Сообщение от ksa

Предложу такой вариант...

Вооооооооот!

Прошу прощения за кривость html, но это чтоб быстрее показать что ВСЁ РАБОТАЕТ! ))))
Спасибище!

http://jsfiddle.net/Mv6u6/4/

ps. Два дня изучаю яву+jq и это что-то с чем-то я скажу Вам, когда после нескольких часов получаешь рабочий код.... )))) да вы и сами наверное знаете ))

BETEPAH · #15 (**permalink**) 05.11.2013, 10:38

this.parentNode.parentNode - это не совсем правильный путь. Он жестко привязывает код к верстке. Логичнее было бы наоборот идти сверху вниз - сначала собрать в массив товар, а затем навешивать калькуляторы на каждый.

Сообщение от Chekist

Стопанулся на этапе:... при нажатии на ссылку брались значения ТОЛЬКО из родителельских дивов в их же пределах.

Что нужно дописать в код для выполнения этого обязательного условия?

В сообщении номер 6 я специально добавил еще один div, чтоб было видно работу. Почему стопанулись-то?

Chekist · #16 (**permalink**) 05.11.2013, 10:41

В качестве бонуса можно попросить допилить немного код
http://jsfiddle.net/Mv6u6/4/
на проверку чтобы в input не было левых символов (буквы, отрицательные итп) только числа от 1 до 999.
В противном случае возвращалась бы ошибка строкой.
???
Можно конечно отправить меня читать основы... как вариант ))))

Chekist · #17 (**permalink**) 05.11.2013, 10:42

Сообщение от BETEPAH

this.parentNode.parentNode - это не совсем правильный путь. Он жестко привязывает код к верстке. Логичнее было бы наоборот идти сверху вниз - сначала собрать в массив товар, а затем навешивать калькуляторы на каждый.

В сообщении номер 6 я специально добавил еще один div, чтоб было видно работу. Почему стопанулись-то?

Все работает, но не на чистой яве, как предложили Вы, а на jq.
http://jsfiddle.net/Mv6u6/4/
Спасибо!!!

BETEPAH · #18 (**permalink**) 05.11.2013, 10:44

Сообщение от Chekist

Все работает, но не на чистой яве, как предложили Вы, а на jq.

Какая разница на чем?

Суть не в этом.
Работает до первого редизайна, а затем верстальщику придется искать, почему перестало работать

Chekist · #19 (**permalink**) 05.11.2013, 10:50

Допилил код на проверку данных в input (переменная n количество товара) - должна быть только целым числом >= 1.
Вот код:
http://jsfiddle.net/Mv6u6/5/
Последний вопрос - всё ли я учел? Или есть вариант более корректный?

ksa · #20 (**permalink**) 05.11.2013, 10:53

Сообщение от BETEPAH

Он жестко привязывает код к верстке. Логичнее было бы наоборот идти сверху вниз

Это спорный вопрос...

Форум

Справочник

Discord чат

Курсы javascript