Форум

dima-kruglyak · #1 (**permalink**) 26.03.2017, 15:42

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="block-1">
    <div class="block-1-1"> 
        <input type="text" value="1" class="block-col">
        <input type="text" value="5" class="block-price">
        <span class="block-total"></span>
    </div>
</div>

<div class="block-1">
    <div class="block-1-1"> 
        <input type="text" value="1" class="block-col">
        <input type="text" value="5" class="block-price">
        <span class="block-total"></span>
    </div>
</div>


<script type="text/javascript">

 $(function () {
    $(".block-1").each(function (indx, el) {
        
        $('.block-1-1', el).on('change', 'input', function(event) {
          
            var total = (parseInt($( ".block-col" ).val()) *  parseInt($( ".block-price" ).val()));

            $('.block-total').text(total);
        });
    });
});
</script>

Подскажите плиз как сделать чтобы скрипт выполняться только в блоке в который ввожу значения.

рони · #2 (**permalink**) 26.03.2017, 15:49

dima-kruglyak,

<!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() {
 $(".block-1").each(function (indx, el) {
        $(el).on('input', 'input', function(event) {
            var total = (parseInt($( ".block-col", el).val()) *  parseInt($( ".block-price",el ).val()))||"";
             $('.block-total', el).text(total);
        });
    });
});
  </script>
</head>

<body>
<div class="block-1">
    <div class="block-1-1">
        <input type="text" value="1" class="block-col">
        <input type="text" value="5" class="block-price">
        <span class="block-total"></span>
    </div>
</div>

<div class="block-1">
    <div class="block-1-1">
        <input type="text" value="1" class="block-col">
        <input type="text" value="5" class="block-price">
        <span class="block-total"></span>
    </div>
</div>
</body>
</html>

dima-kruglyak · #3 (**permalink**) 26.03.2017, 22:24

Можете подсказать в где ошибка, начинает считать после второго клика на +

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="content">
   
    <input type="text" value="200" class="price">
    
    <button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
    <input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
    <button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>

    <span class="total">200</span> 
</div>

<div class="content">
    <input type="text" value="200" class="price">
    
    <button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
    <input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
    <button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>

    <span class="total">200</span> 
</div>

<script>

    $(function () {
        $(".content").each(function (indx, el) {

            $(el).on('click', '.value-control', function (event) {

                var total = (parseInt($(".quantity", el).val()) * parseInt($(".price", el).val()));
                $('.total', el).text(total);

                var action = $(this).attr('data-action');
                var target = $(this).attr('data-target');
                var id = $(this).attr("data-cart-id");
                var value = parseFloat($('[id="' + target + '"]', el).val());
                if (action == "plus") {
                    value++;
                }
                if (action == "minus") {
                    value--;
                }
                $('[id="' + target + '"]', el).val(value)
            });
        });
    });
</script>

laimas · #4 (**permalink**) 26.03.2017, 22:31

min="1" max="10" имеют значения только для поля типа number. А получить значение такого поля ни как текст, без лишних преобразований, это value.valueAsNumber.

рони · #5 (**permalink**) 27.03.2017, 00:01

dima-kruglyak,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="content">

    <input type="text" value="200" class="price">

    <button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
    <input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
    <button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>

    <span class="total">200</span>
</div>

<div class="content">
    <input type="text" value="200" class="price">

    <button class="minus value-control" data-action="minus" data-target="quantity" data-cart-id="1">- </button>
    <input type="text" value="1" id="quantity" min="1" max="10" class="quantity">
    <button class="plus value-control" data-action="plus" data-target="quantity" data-cart-id="1"> + </button>

    <span class="total">200</span>
</div>

<script>

    $(function () {
        $(".content").each(function (indx, el) {

            $(el).on('click', '.value-control', function (event) {
                var action = $(this).attr('data-action');
                var cls = $(this).attr('data-target');
                var add = $(this).attr("data-cart-id");
                var input = $("."+cls, el)[0];
                var min = +input.getAttribute("min");
                var max = +input.getAttribute("max");
                //input.value = +input.value||min;
                input.value -= action == "plus" ? -add : add;
                input.value  = Math.min(Math.max(min,+input.value),max);
                var price = $(".price", el)[0];
                //price.value = +price.value||0;
                var total = price.value * input.value;
                $('.total', el).text(total)
            });
        });
    });
</script>

Форум

Справочник

Discord чат

Курсы javascript