Форум

рони · #41 (**permalink**) 26.02.2017, 21:27

MixPetrov,

data-maximum="125" data-minimum="10"

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    function mathC() {
        var nmb = +this.dataset.nmb;
        var ns = +this.value.replace(/\D/g, "") || 0;
        ns = Math.ceil(ns / nmb) * nmb;
        this.value = ns
    }

    function is() {
        var maximum = +this.dataset.maximum;
        var minimum = +this.dataset.minimum;
        var ns = +this.value.replace(/\D/g, "") || 0;
        if (ns > maximum) ns = maximum;
        if (ns < minimum) ns = minimum;
        this.value = ns;
    }
    var timer;
    $('.quantity_cart [type="text"]').on("input", function() {
        window.clearTimeout(timer);
        var self = this;
        timer = window.setTimeout(function() {
                mathC.bind(self)();
                is.bind(self)()
            },1200)
    })
});
  </script>



  </script>
</head>

<body>

<div class="quantity_cart">


        <input type="text" name="product_id" size="2" value="20" data-maximum="125" quantity="125" data-minimum="10" data-nmb="10" type="text">


        </div>


</body>
</html>

MixPetrov · #42 (**permalink**) 26.02.2017, 21:43

Спасибо, но в данном случае лучше когда на каждую функцию свой таймер. Эти функции находятся в файле *.php и выполняются в правильном порядке, но есть еще одна функция она написана в файле *.js и она выполняется самой первой, а надо чтобы выполнялась последней.

рони · #43 (**permalink**) 26.02.2017, 22:20

MixPetrov,
не осилил

MixPetrov · #44 (**permalink**) 26.02.2017, 22:55

Работа скриптов должна выстраивается в следующем порядке -
mathC - округляет value;
is - задает верхнюю и нижнюю границы для value (max i min);
recalc - умножает value на стоимость.

В данное время скрипты выполняются в следующем порядке:
recalc;
mathC;
is.

Все скрипты выполняются при oninput

рони · #45 (**permalink**) 26.02.2017, 23:10

MixPetrov,
думайте сами у меня вариантов нет, но затруднять ввод клиентом данных плохая практика, возможен только запрет на не цифровые символы, выводить результат надо в другом месте, а не в том которое используют для ввода.

MixPetrov · #46 (**permalink**) 26.02.2017, 23:23

Результат функции recalc выводится в другом месте.

Выведен HTML в firebug

<div class="quantity_cart">

<input name="2" size="2"  value="20" data-maximum="125" quantity="125" data-minimum="20" data-nmb="10" data-prc="0.8400" type="text" oninput="recalc(2);"> // здесь выполнются функции recalc -> mathC -> is.

</div>
<div class="price">
<span class="change-price2" price="0.8400">4.20USD</span> // здесь выводится результат recalc
</div>

function recalc(product_id) { // скрипт находится в отдельном файле и выполняется первым, а должен выполняться последним
		var quantity = $('input[name="' + product_id + '"]').val();
		var quantity = typeof(quantity) != 'undefined' ? quantity : 1;
		var options_price = 0;
		var price_no_format = Number($('.change-price'+product_id).attr('price'));
		var special_no_format = Number($('.change-special'+product_id).attr('price'));
		var new_price = (price_no_format + options_price) * quantity;
		var new_special = (special_no_format + options_price) * quantity;
		$('.change-price' + product_id).html(price_format(new_price)); // вывод значения после пересчета
		$('.change-special' + product_id).html(price_format(new_special));
	}

рони · #47 (**permalink**) 26.02.2017, 23:30

MixPetrov,
...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $(".quantity_cart").each(function(indx, el) {
        var input = $("input", el)[0];
        var nmb = +input.dataset.nmb;
        var value = +input.value;
        var maximum = +input.dataset.maximum;
        var minimum = +input.dataset.minimum;
        var prc = +input.dataset.prc;

        function setValue() {
            var ns = +input.value.replace(/\D/g, "") || 0;
            ns = Math.ceil(ns / nmb) * nmb;
            value = ns
        }

        function limit() {
            return value = Math.min(Math.max(minimum, value), maximum)
        }

        function add(x) {
            return value += x * nmb
        }
        var span = $("div.price").eq(indx).find("span");

        function show() {
            input.value = value;
            var sum = (value * prc).toFixed(2) + "USD";
            span.text(sum)
        }
        show();
        var timer;
        $(el).on("click", ".minus, .plus", function() {
            var x = $(this).is(".minus") ? -1 : 1;
            add(x);
            limit();
            show()
        }).on("input", function() {
            window.clearTimeout(timer);
            timer = window.setTimeout(function() {
                setValue();
                limit();
                show()
            }, 1200)
        })
    })
});
  </script>
</head>

<body>
<div class="quantity_cart">
<span class="minus" ><</span>
<input name="2" size="2" oninput="recalc(2);" value="20" data-maximum="120"  data-minimum="20" data-nmb="10" data-prc="0.8400" type="text">
<span class="plus" >></span>
</div>
<div class="price">
<span class="change-price" ></span>
</div>


</body>
</html>

MixPetrov · #48 (**permalink**) 26.02.2017, 23:42

Так и есть

рони · #49 (**permalink**) 27.02.2017, 00:11

MixPetrov,
медитируйте код выше и числа должны быть кратны data-nmb

MixPetrov · #50 (**permalink**) 27.02.2017, 02:45

рони, Вы просто Бог в своем деле!

Подскажите как вычленить кусок из кода в котором происходит перемножение и подмена значения в <div class="price">

Форум

Справочник

Discord чат

Курсы javascript