从输入字段处理和输出数组中的数据

Question

在单击事件中，我需要从几个输入字段中获取一些数字，找到这些数字的总数，分别对这些数字进行一些数学运算（包括将每个数字除以总数），然后分别在其他地方依次输出新数字。

这是一个截图，如果有帮助的话：

到目前为止，我已经通过将输入推入数组来实现这一目标。 但是无论出于什么原因，我都无法弄清楚如何对数组中的数字进行数学运算，然后将其输出到其他位置。

任何伪代码或技巧都将非常有用。

我已经测试并删除了其他内容达一百万次，但这就是我的目的。

HTML：

 <div class="input-grid">
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.541</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.542</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.543</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.544</span>
            </div>
        </div>
        <div class="btn-wrap">
        <span class="calc-btn">calculate</span>
        <span class="reset-btn">reset</span>
        </div> 

JS：

$('.calc-btn').click(function(){

    var inputs = [];


    function collectInputs(array){

        $('input').each(function(){

        array.push($(this).val());

        });

    }


collectInputs(inputs);


});

Answer 1

JS

$('.calc-btn').click(function(){

var inputs = [];
var total = 0;

    $('.input-box input').each(function(){

        inputs.push($(this).val());
        total = total + ($(this).val());

    });
    var minvalue = Math.min.apply(Math,inputs); // get minimum value in array
    var count_array = inputs.length; // number of elements in array

    //calculation part
    for (i = 0; i < inputs.length; ++i) {
           inputs[i] = ((inputs[i] / total) * 10); / minvalue;
           inputs[i] = inputs[i].toFixed(3);
    }


});

小提琴： http : //jsfiddle.net/KDqts/3/

Answer 2

var numbers = [];

//take some numbers from several input fields, 
$('.myFields').each(function() {
  numbers.push($(this).val());
});

//find the total of those numbers, 
var total = 0;
$.each(numbers, function() {
  total += this;
});

//do some math on those numbers individually 
var processed = [];
$.each(numbers, function(i) {
  //(including diving each by the total), 
  processed[i] = this / total;
});

//and output new numbers in order, 
processed.sort();

$.each(numbers, function() {
  //individually, somewhere else.
  $('#somewhere').val(this);
});

Answer 3

$('.calc-btn').click(function(){
     var minVal=Infinity;
    /* create array, get minVal, and sort*/
    var arr= $('input').map(function(){
        var val=1*$(this).val();
        minVal = val < minVal ? val : minVal;
        return val
    }).get().sort();
    /* do math on array*/
    $.each(arr, function(i, val){
        arr[i]= val *10 /minVal;
    });

    /* do something with `arr`*/  
});

DEMO

Answer 4

花了一段时间，但我发现了（有很多帮助）。 谢谢阿妮！

HTML：

<div class="input-grid">
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.541</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.542</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.543</span>
            </div>
            <div class="input-row">
                <div class="input-box"><input type="text"><span class="input-unit">px</span></div>
                <i class="fa fa-chevron-right"></i>
                <span class="input-response">1.544</span>
            </div>
        </div>
        <div class="btn-wrap">
        <span class="calc-btn">calculate</span>
        <span class="reset-btn">reset</span>
        </div>

JS：

$('.calc-btn').click(function(){

var inputs = [];
var total = 0;

    $('.input-box input').each(function(){
    var num = parseFloat($(this).val());
        inputs.push(num);
        total = total + (num);

    });
    var minValue = Math.min.apply(Math,inputs); // get minimum value in array
    var count_array = inputs.length; // number of elements in array

    //calculation part
    for (i = 0; i < inputs.length; i++) {
           inputs[i] = ((inputs[i] / total) * 1000)/ minValue;
           inputs[i] = inputs[i].toFixed(3);

    }

        $('span.input-response').each(function(i){
            $(this).text(inputs[i]);

         });

});

一个主要问题是我需要使用parseFloat将值转换为整数，然后再将它们压入数组。 另一个问题是弄清楚如何将最终答案四舍五入到我用来toFixed（）的管理小数位数； 对于。 感谢大家的帮助！