多个输入步进器的总功能

Total function for multiple input-steppers

本文关键字：功能 步进 输入      更新时间：2023-09-26

我正在尝试了解如何编写一个总函数来调用我从库中使用的多个输入步进器。我确实阅读了库关于如何调用事物的文档。现在我可以递增和递减 1 步进器并乘以一个变量，并显示在总字段中。我不知道如何更改总功能，以便它可以在所有步进器上使用并显示在 1 个总计字段中。我需要if else还是循环？我不知道如何开始。也不确定如何在此处添加库？

$(document).ready(function(){
  $(function () {
    // Document ready
    $('.input-stepper').inputStepper();
  });
});
var value1 = 0.95;
var value2 = 4.00;
var value3 = 2.00;
// These are to call inputs
$('#amount1').on('increase', function (e, amount, plugin) {
  calculate();
});
$('#amount1').on('decrease', function (e, amount, plugin) {
});
$('#amount2').on('increase', function (e, amount, plugin) {
});
$('#amount2').on('decrease', function (e, amount, plugin) {
});
$('#amount3').on('increase', function (e, amount, plugin) {
});
$('#amount3').on('decrease', function (e, amount, plugin) {
});
// these are to call stepper buttons
$('[data-input-stepper-increase] ').click(function(){
});
$('[data-input-stepper-decrease]').click(function(){
});
function calculate(){
  var total = 0;
  var quantity = parseInt($('#amount1 ').val());
  total =  value1 * quantity;
  console.log(total);
  $('#TotalField').val(total.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>$0.95 value</h3>
<button data-input-stepper-decrease>-</button>
<input id="amount1"type="text" value="0">
<button data-input-stepper-increase >+</button>
<h3>$4.00 value</h3>
<button data-input-stepper-decrease>-</button>
<input id="amount2"type="text" value="0">
<button data-input-stepper-increase>+</button>
<h3>$2.00 value</h3>
<button data-input-stepper-decrease>-</button>
<input id="amount3"type="text" value="0">
<button data-input-stepper-increase>+</button>
<label>Total</label><input type="text" 
                           class="" id="TotalField" name="TotalField" />

这是图书馆 https://github.com/AanZee/input-stepper 的链接

链接到我正在研究
的编码笔http://codepen.io/Ongomobile/pen/kXogvZ?editors=1111

关于绑定，增加和减少都可以一次性绑定：

$('[id^=amount]').on('increase decrease', calculate);

除了'[id^=amount]'，你也可以使用'#amount1,#amount2, etc'，但更好的是有一个公共类

为了便于汇总，值应该在集合中，例如var values = [0.95, 4.00, 2.00];（尽管您也可以将它们放在元素的（数据）属性中）

然后，如果 box 是输入的 jQuery 变量，你可以总结如下：

var total = 0;
boxes.each(function(ind,box){ total+= values[ind] *  $(box).val();});

最终确定，整体将如下所示：

var boxes = $('[id^=amount]').on('increase decrease', calculate);  //bind the elements and assing to the boxes variable in one go
var values = [0.95, 4.00,  2.00];
function calculate(){
   var total = 0;
   boxes.each(function(ind,box){ total+= values[ind] *  $(box).val();});
   console.log(total);
     $('#TotalField').val(total.toFixed(2));
}

代码笔

我相信

以下解决方案是您正在寻找的，从您当前的代码来看：

var value1 = 0.95;
var value2 = 4.00;
var value3 = 2.00;
// these are to call stepper buttons
$('[data-input-stepper-increase] ').click(function(){
     calculate();
  });
 $('[data-input-stepper-decrease]').click(function(){
     calculate();
  });   
function calculate(){
      var total = 0,
      quantity1 = parseInt($('#amount1 ').val()),
      quantity2 = parseInt($('#amount2').val()),
      quantity3 = parseInt($('#amount3 ').val());
    total =  (value1 * quantity1)+(value2 * quantity2)+(value3 * quantity3);
     $('#TotalField').val(total.toFixed(2));
  }
相关文章：