Question

在点击事件中，我需要从几个输入字段中取一些数字，找到这些数字的总数，单独对这些数字进行一些数学计算（包括按总数潜水），然后依次输出新数字，别的地方。

以下是截图，如果有帮助： calculator screenshot

到目前为止，我通过将输入推送到数组中来接近它。但无论出于何种原因，我都无法弄清楚如何对数组中的数字进行数学运算，然后将它们输出到别处。

任何伪代码或提示都会非常有用。

我已经测试并删除了其他一百万次，但这就是我所处的位置。

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

花了一段时间，但我弄明白了（有很多帮助）。谢谢Ani！

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将值转换为整数，然后再将它们推送到数组。另一个问题是弄清楚如何将最终答案舍入到我用过的固定（）的管理小数位数;对于。感谢大家的帮助！

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

4 个答案: