Question

我试图理解如何编写一个函数来调用我从库中使用的多个输入步进器。我确实阅读了关于如何调用内容的库的文档。现在我可以增加＆amp;递减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

的链接

链接到我正在工作的codpen http://codepen.io/Ongomobile/pen/kXogvZ?editors=1111

Answer 1

根据您当前的代码判断，我认为以下解决方案是您正在寻找的：

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));
  }

Answer 2

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

$('[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));
}

codepen

多个输入步进器的总功能

2 个答案: