counter для нескольких строк

417
31 января 2017, 22:56

Есть такой код:

var tr = $('.row'), 
    sum = tr.find('.sum'), 
    startSum = parseInt(sum.text()); 
 
 
$('.btn-number').click(function(e){ 
    e.preventDefault(); 
     
    var  
    $this = $(this), 
    fieldName = $(this).attr('data-field'), 
    type      = $(this).attr('data-type'), 
    input = $("input[name='"+fieldName+"']"), 
    currentVal = parseInt(input.val()); 
   
   
    if (!isNaN(currentVal)) { 
        if(type == 'minus') { 
             
            if(currentVal > input.attr('min')) { 
                input.val(currentVal - 1).change(); 
               
              var counter = input.val(); 
              sum.html(counter*startSum); 
              console.log(); 
            }  
            if(parseInt(input.val()) == input.attr('min')) { 
                $(this).attr('disabled', true); 
            } 
 
        } else if(type == 'plus') { 
 
            if(currentVal < input.attr('max')) { 
                input.val(currentVal + 1).change(); 
               
              var counter = input.val(); 
              sum.html(counter*startSum); 
              console.log(); 
            } 
            if(parseInt(input.val()) == input.attr('max')) { 
                $(this).attr('disabled', true); 
            } 
 
        } 
    } else { 
        input.val(0); 
    } 
}); 
$('.input-number').focusin(function(){ 
   $(this).data('oldValue', $(this).val()); 
   
   var counter = $(this).val(); 
      sum.text(counter*startSum); 
}); 
$('.input-number').change(function() { 
     
    minValue =  parseInt($(this).attr('min')); 
    maxValue =  parseInt($(this).attr('max')); 
    valueCurrent = parseInt($(this).val()); 
     
    name = $(this).attr('name'); 
    if(valueCurrent >= minValue) { 
        $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled'); 
       
      var counter = $(this).val(); 
      sum.text(counter*startSum); 
    } else { 
        alert('Sorry, the minimum value was reached'); 
        $(this).val($(this).data('oldValue')); 
       
    } 
    if(valueCurrent <= maxValue) { 
        $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled'); 
       
      var counter = $(this).val(); 
      sum.text(counter*startSum); 
    } else { 
        alert('Sorry, the maximum value was reached'); 
        $(this).val($(this).data('oldValue')); 
       
    } 
     
     
}); 
$(".input-number").keydown(function (e) { 
        // Allow: backspace, delete, tab, escape, enter and . 
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 || 
             // Allow: Ctrl+A 
            (e.keyCode == 65 && e.ctrlKey === true) ||  
             // Allow: home, end, left, right 
            (e.keyCode >= 35 && e.keyCode <= 39)) { 
                 // let it happen, don't do anything 
                 return; 
        } 
        // Ensure that it is a number and stop the keypress 
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
            e.preventDefault(); 
        } 
    });
button, 
input, 
.sum{ 
  padding: .5rem; 
} 
 
.sum { 
  border: 1px solid #ccc; 
  margin: 1rem; 
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 
 
   
  <div class="row"> 
    <div class="calc"> 
      <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">- </button>   
      <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">   
      <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button> 
    </div> 
    <div class="sum">10</div> 
  </div> 
   
   
   <div class="row"> 
    <div class="calc"> 
      <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">- </button>   
      <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">   
      <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button> 
    </div> 
    <div class="sum">12</div> 
  </div>

Если один row, то все работает отлично, а если несколько - не понимаю как сделать, чтобы правильно работало.

Для каждого поля row при увеличении\уменьшении counter должна и сумма увеличиваться\уменьшаться соответственно.

Как поправить код?

Answer 1

var tr, 
  sum, 
  startSum; 
 
 
$('.btn-number').click(function(e) { 
  e.preventDefault(); 
  tr = $(this).parent().parent(); 
  sum = $(tr).find(".sum"); 
  startSum = parseInt($(tr).find(".sum").data("num")); 
  var 
    fieldName = $(this).attr('data-field'), 
    type = $(this).attr('data-type'), 
    input = $(tr).find("input"), 
    currentVal = parseInt(input.val()); 
 
 
  if (!isNaN(currentVal)) { 
    if (type == 'minus') { 
 
      if (currentVal > input.attr('min')) { 
        input.val(currentVal - 1).change(); 
 
        var counter = input.val(); 
        sum.html(counter * startSum); 
      } 
      if (parseInt(input.val()) == input.attr('min')) { 
        $(this).attr('disabled', true); 
      } 
 
    } else if (type == 'plus') { 
 
      if (currentVal < input.attr('max')) { 
        input.val(currentVal + 1).change(); 
 
        var counter = input.val(); 
        sum.html(counter * startSum); 
 
      } 
      if (parseInt(input.val()) == input.attr('max')) { 
        $(this).attr('disabled', true); 
      } 
 
    } 
  } else { 
    input.val(0); 
  } 
}); 
$('.input-number').focusin(function() { 
  $(this).data('oldValue', $(this).val()); 
 
  var counter = $(this).val(); 
  sum.text(counter * startSum); 
}); 
$('.input-number').change(function() { 
 
  minValue = parseInt($(this).attr('min')); 
  maxValue = parseInt($(this).attr('max')); 
  valueCurrent = parseInt($(this).val()); 
 
  name = $(this).attr('name'); 
  if (valueCurrent >= minValue) { 
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled'); 
 
    var counter = $(this).val(); 
    sum.text(counter * startSum); 
  } else { 
    alert('Sorry, the minimum value was reached'); 
    $(this).val($(this).data('oldValue')); 
 
  } 
  if (valueCurrent <= maxValue) { 
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled'); 
 
    var counter = $(this).val(); 
    sum.text(counter * startSum); 
  } else { 
    alert('Sorry, the maximum value was reached'); 
    $(this).val($(this).data('oldValue')); 
 
  } 
 
 
}); 
$(".input-number").keydown(function(e) { 
  // Allow: backspace, delete, tab, escape, enter and . 
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 || 
    // Allow: Ctrl+A 
    (e.keyCode == 65 && e.ctrlKey === true) || 
    // Allow: home, end, left, right 
    (e.keyCode >= 35 && e.keyCode <= 39)) { 
    // let it happen, don't do anything 
    return; 
  } 
  // Ensure that it is a number and stop the keypress 
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
    e.preventDefault(); 
  } 
});
button, 
input, 
.sum { 
  padding: .5rem; 
} 
.sum { 
  border: 1px solid #ccc; 
  margin: 1rem; 
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 
 
 
<div class="row"> 
  <div class="calc"> 
    <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">-</button> 
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> 
    <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button> 
  </div> 
  <div class="sum" data-num="12">12</div> 
</div> 
 
 
<div class="row"> 
  <div class="calc"> 
    <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">-</button> 
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> 
    <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button> 
  </div> 
  <div class="sum" data-num="13">13</div> 
</div> 
 
<div class="row"> 
  <div class="calc"> 
    <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">-</button> 
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> 
    <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button> 
  </div> 
  <div class="sum" data-num="14">14</div> 
</div>

UPD: 

$('.btn-number').click(function(e) { 
  e.preventDefault(); 
  var tr = $(this).parent().parent(), 
    btn = $(this), 
    sum = $(tr).find(".sum"), 
    startSum = parseInt($(tr).find(".sum").data("num")), 
    input = $(tr).find("input"); 
  if (isNaN(parseInt(sum.text()))) { 
    input.val(0); 
  } else { 
    foo(btn, input, sum, startSum); 
  } 
}); 
 
function foo(btn, input, sum, startSum) { 
  var minValue = parseInt(input.attr('min')); 
  var maxValue = parseInt(input.attr('max')); 
  var counter = btn.data("type") == "minus" ? parseInt(input.val()) - 1 : parseInt(input.val()) + 1; 
  if (counter < minValue) { 
    $(btn).prop('disabled', true); 
    alert('Sorry, the minimum value was reached'); 
  } else if (counter > maxValue) { 
    $(btn).prop('disabled', true); 
    alert('Sorry, the maximum value was reached'); 
  } else { 
    $(".btn").prop('disabled', false); 
    $(btn).removeAttr('disabled'); 
    input.val(counter); 
    sum.text(parseInt(counter) * parseInt(startSum)); 
  } 
}
button, 
input, 
.sum { 
  padding: .5rem; 
} 
.sum { 
  border: 1px solid #ccc; 
  margin: 1rem; 
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script> 
 
 
<div class="row"> 
  <div class="calc"> 
    <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">-</button> 
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> 
    <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button> 
  </div> 
  <div class="sum" data-num="12">12</div> 
</div> 
<div class="row"> 
  <div class="calc"> 
    <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">-</button> 
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> 
    <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button> 
  </div> 
  <div class="sum" data-num="13">13</div> 
</div>

READ ALSO
Автоподстановка/автозамена символов в textarea
jQuery

Автоподстановка/автозамена символов в textarea

Есть textarea с id = "test"

 447
Проверить форму на ссылку.JQuery или JavaScript
jQuery

Проверить форму на ссылку.JQuery или JavaScript

ПриветЕсть такая форма

 383
Как динамически добавлять окна?
jQuery

Как динамически добавлять окна?

Есть интервал, в котором элементы массива отображаются на картеХочу к отображаемым маркерам добавить окно информации

 345
Угол внутри круга
CSS

Угол внутри круга

Доброго времени сутокНе подскажите, как внутрь круга, нарисованного на css, нарисовать уголок? Интересует именно как запихнуть его в сам круг

 380