Форум

bond1211 · #1 (**permalink**) 17.12.2013, 22:40

Здравствуйте, разобраться в своей проблеме не могу.
И так, есть вполне стандартная хреновина с +- увеличивающим или уменьшающим значение 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 увеличилось значение, второй скрипт взял новое значение и перемножил.

рони · #2 (**permalink**) 17.12.2013, 23:42

bond1211,

<!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">&uarr;</div>
<input type="text" class="num" name="quantity" id="product_buy_quantity"  size="2" value="10" />
<div class="plus_minus_icon minus">&darr;</div>
<div id="formated_price" data-price="100">100</div>
</body>

</html>

bond1211 · #3 (**permalink**) 18.12.2013, 17:56

Спасибо большое за ответ, но стрелками теперь выдаёт NaN
В ручную всё так же работает..

рони · #4 (**permalink**) 18.12.2013, 18:08

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

но стрелками теперь выдаёт NaN

здесь или у вас?

bond1211 · #5 (**permalink**) 18.12.2013, 18:16

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

здесь или у вас?

У меня, в Вашем исправлении всё прекрасно работает, не могу понять где именно у себя накосячил..

рони · #6 (**permalink**) 18.12.2013, 18:34

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>

bond1211 · #7 (**permalink**) 18.12.2013, 18:43

Нет, всё проставлено, поясню:

<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той день пытаюсь, гугл меня уже не любит

рони · #8 (**permalink**) 18.12.2013, 18:56

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

Вот файлик без ваших подсказок, может я совсем дурак

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

bond1211 · #9 (**permalink**) 18.12.2013, 19:11

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

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

Извините пожалуйста, не проверил http://webfile.ru/12c314f4f2c94d55a3933b5402dc9510

рони · #10 (**permalink**) 18.12.2013, 19:27

bond1211,
не дублируйте код и неиспользуйте одинаковые id и желательно не php а живой код что у вас на выходе

Форум

Справочник

Discord чат

Курсы javascript