Обработка и вывод данных из массива из полей ввода

0

В событии клика мне нужно взять некоторые цифры из нескольких полей ввода, найти общее количество этих чисел, выполнить некоторую математику по этим номерам в отдельности (включая дайвинг по сумме) и выводить новые номера по порядку, отдельно, в другом месте,

Вот скриншот, если это помогает: Изображение 174551

До сих пор я подходил к нему, вставляя входы в массив. Но по какой-то причине я не могу понять, как выполнять математику по числам в массиве, а затем выводить их в другом месте.

Любой псевдокод или подсказки были бы удивительно полезными.

Я тестировал и удалял другие вещи миллион раз, но это то, где я нахожусь.

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


});
  • 1
    Где твой код до сих пор?
  • 0
    Одинаковы ли вычисления во всех полях ввода?
Показать ещё 8 комментариев
Теги:

4 ответа

0
Лучший ответ

Это заняло некоторое время, но я понял это (с большой помощью). Спасибо Ани!

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(); для. Спасибо всем за помощь!

Поделиться
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/

Поделиться
  • 0
    благодарю вас! Я попробую и дам знать, работает ли это :)
  • 0
    Это решение кажется мне наиболее ясным из трех приведенных здесь. поэтому, чтобы установить значения каждого .input-response, вам нужно всего лишь $ ('. input-response'). each (i) {$ (this) .text (input [i])}; ?
Показать ещё 7 комментариев
0 
$('.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

Поделиться
  • 0
    спасибо, я тоже попробую. Я очень ценю это.
0 
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);
});
Поделиться
  • 0
    Я немного размышлял над тем, как использовать $ .each таким образом (в отличие от $ ('element'). Each (); но это действительно проясняет это для меня. Спасибо, я попробую.
  • 0
    Конечно! Дайте мне знать, если это работает;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню