多輸入步進器的總功能

Question

我想了解如何編寫一個總函數來調用我從庫中使用的多個輸入步進器。我確實閱讀了圖書館關於如何打電話的文件。現在我可以遞增&遞減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

關於結合，既增加和減少會一氣呵成的約束：

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

相反的'[id^=amount]'，你也可以使用'#amount1,#amount2, etc'，但更好的辦法是有一個共同的類

爲便於總結，值應該位於集合中，例如var values = [0.95, 4.00, 2.00];（儘管也可以將它們放在元素的（數據）屬性中）

然後，如果boxes是j的變量t他輸入，你可以用總結：

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

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