Плюс\минус и value с умножением
Здравствуйте, разобраться в своей проблеме не могу.
И так, есть вполне стандартная хреновина с +- увеличивающим или уменьшающим значение value в input <div class="plus_minus_icon plus"><img src="/catalog/view/theme/default/images/up.gif" alt=""/></div> <input type="text" class="num" name="quantity" id="product_buy_quantity" oninput="recalculateprice();" size="2" value="<?php echo $minimum; ?>" /> <div class="plus_minus_icon minus"><img src="/catalog/view/theme/default/images/down.gif" alt=""/></div> Сам js:
<script type="text/javascript">
$(document).ready(function (){
$(".plus_minus_icon").unbind('click');
$('.plus_minus_icon').live("click", (function() {
var Value = $(this).parent().find("input").val();
if ($(this).hasClass("plus")) {
Value = parseFloat(Value) + 5
} else {
if (Value > 1) {
Value = parseFloat(Value) - 5
}
}
$(this).parent().find("input").val(Value);
var input_quantity = Number($('#product_buy_quantity').attr('value'));
}));
});</script>
Всё работает, всё прекрасно, едем дальше. Делаю скрипт, который считает число * на значение value, если в валуе я ручками цифру наберу, всё хорошо, если стрелками - то не работает. Приведу скрипт считающий сумму
function recalculateprice()
{
var main_price = Number($('#formated_price').attr('price'));
var input_quantity = Number($('#product_buy_quantity').attr('value'));
main_price *= input_quantity;
}
ну и выводит результат там в конце в id="formated_price" В общем, по отдельности 2 скрипта работают, один прибавляет\убавляет циферки, второй правильно берёт значение и умножает его на значение в value ( то что ввели ручками). Вопрос в том, как объединить эти 2 скрипта, тобишь нажали + в value увеличилось значение, второй скрипт взял новое значение и перемножил. |
bond1211,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('.plus_minus_icon').on("click", function () {
var $sum = $('#product_buy_quantity'),
Value = $sum.val();
if ($(this).hasClass("plus")) {
Value = parseFloat(Value) + 5
} else {
if (Value > 1) {
Value = parseFloat(Value) - 5
}
}
$sum.val(Value);
$sum.change();
});
$('#product_buy_quantity').on("change input", function () {
var main_price = Number($('#formated_price').data('price'));
var input_quantity = Number($('#product_buy_quantity').val());
main_price *= input_quantity;
$('#formated_price').text(main_price) })
});
</script>
</head>
<body>
<div class="plus_minus_icon plus">↑</div>
<input type="text" class="num" name="quantity" id="product_buy_quantity" size="2" value="10" />
<div class="plus_minus_icon minus">↓</div>
<div id="formated_price" data-price="100">100</div>
</body>
</html>
|
Спасибо большое за ответ, но стрелками теперь выдаёт NaN
В ручную всё так же работает.. |
Цитата:
|
Цитата:
|
bond1211,
непроставили значение value изначально ? вариант без установки value
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('.plus_minus_icon').on("click", function () {
var $sum = $('#product_buy_quantity'),
Value = parseFloat($sum.val())||0;
if ($(this).hasClass("plus")) {
Value += 5
} else {
if (Value > 1) {
Value -= 5
}
}
$sum.val(Value);
$sum.change();
});
$('#product_buy_quantity').on("change input", function () {
var main_price = Number($('#formated_price').data('price'));
var input_quantity = Number($('#product_buy_quantity').val());
main_price *= input_quantity;
$('#formated_price').text(main_price) });
$('#product_buy_quantity').change()
});
</script>
</head>
<body>
<div class="plus_minus_icon plus"><img src="http://javascript.ru/forum/images/smilies/victory.gif" alt=""/></div>
<input type="text" class="num" name="quantity" id="product_buy_quantity" size="2" value="" />
<div class="plus_minus_icon minus"><img src="http://javascript.ru/forum/images/smilies/nono.gif" alt=""/></div>
<div id="formated_price" data-price="100"></div>
</body>
</html>
|
Нет, всё проставлено, поясню:
<input type="text" class="num" name="quantity" id="product_buy_quantity" oninput="recalculateprice();" size="2" value="<?php echo $minimum; ?>" /> <?php echo $minimum; ?> этим выводится минимальное число, которое можно заказать, сейчас это 5, и можно стрелками увеличивать +-5 С первым вашим вариантом страница загружается, стоит значение 5, показывается цена, жмём на +, значение 10, вместо цены NaN. Тоесть работать то должно, но не работает, так же там много других скриптов, может где-то конфликт. Вот файлик без ваших подсказок, может я совсем дурак, вдруг вы поймёте.. На самом деле уже 6той день пытаюсь, гугл меня уже не любит |
Цитата:
|
Цитата:
|
bond1211,
не дублируйте код и неиспользуйте одинаковые id и желательно не php а живой код что у вас на выходе |
| Часовой пояс GMT +3, время: 01:53. |