Увеличение / уменьшение больших наборов целых чисел

Question

У меня небольшие проблемы с этой концепцией. Я пытаюсь написать относительно простой скрипт, который увеличит / уменьшит набор целых чисел на указанную величину.

Этот код работает логически, но не так, как хотелось бы.

HTML:

            <table class="ebc-table">
                <tr>
                  <td class="priceChange">4.00</td>
                  <td class="priceChange">16.00</td>
                  <td class="priceChange">31.00</td>
                  <td class="priceChange">51.00</td>
                </tr></table>

JQuery:

        $(".applybutton").click(function(){
            var adjFactor = $("#adj_factor :selected").val();
            var adjAmount = $("#adj_amount").val();

            if( adjFactor == "$" )
            {
                $(".priceChange").each(function() {
                    var test = $(this).html();
                    var updateAmt = parseFloat(test) + parseFloat(adjAmount);
                    //if( isNaN( parseFloat( updateAmt) ) ) // do something here eventually
                    return $(this).html(updateAmt);
                });
            }

        });

Всякий раз, когда вводится величина корректировки и пользователь нажимает кнопку "Применить", все значения изменяются соответственно. Как видно из приведенного выше кода, каждый раз, когда вычисляется сумма, она использует целое число, присутствующее в TD, а НЕ исходное начальное число, как предполагалось... потому что, конечно, $(this).html() изменяется каждый раз, когда сумма рассчитывается и записывается в HTML. Другими словами, суммы просто складываются друг на друга.

Как я мог написать это, чтобы сохранить исходный номер, добавляя / вычитая из исходного числа, а НЕ в / из накопленного числа?

Я понимаю, что мое объяснение может сбить с толку. Я отправлю jsfiddle, если потребуется.

Answer 1

Вы можете использовать атрибуты data-* и jQuery .data (), чтобы получить его. Видеть это.

HTML:

<table class="ebc-table">
            <tr>
              <td class="priceChange" data-origprice="4.00">4.00</td>
              ...
            </tr>
</table>

JS / JQuery:

$(".applybutton").click(function () {
    var adjFactor = $("#adj_factor :selected").val();
    var adjAmount = $("#adj_amount").val();

    if (adjFactor == "$") {
        $(".priceChange").each(function () {
            var test = $(this).data('origprice'); //gets data-origPrice attribute
            var updateAmt = parseFloat(test) + parseFloat(adjAmount);
            //if( isNaN( parseFloat( updateAmt) ) ) // do something here eventually
            return $(this).html(updateAmt);
        });
    }

});

Поддержка браузера тоже очень хорошая!

Answer 2

Одна из стратегий - сохранить исходные значения в массиве.

    var originals = []
    $(".applybutton").click(function(){
    var adjFactor = $("#adj_factor :selected").val();
    var adjAmount = $("#adj_amount").val();

    if( adjFactor == "$" )
    {
        if (originals.length === 0) {
            $(".priceChange").each(function(i) {
                originals[i] = parseFloat($(this).html());
            }
        }
        $(".priceChange").each(function(i) {
        return function() {
            var test = $(this).html();
                var updateAmt = originals[i] + parseFloat(adjAmount);
                //if( isNaN( parseFloat( updateAmt) ) ) // do something here eventually
                else{return $(this).html(updateAmt); }
            });
        }
    }

});

Answer 3

Вы можете сохранить исходный номер в переменной при загрузке страницы и использовать это значение при увеличении.

Вот основной пример:

$(document).ready(function(){
    var origNumber = parseInt($('#num').text(), 10);

    $('button').click(function() {
        var incr = parseInt($('#incr :selected').val(), 10);
        alert(origNumber + incr);
    });
});

JSFiddle

Если вам нужно хранить несколько значений, используйте массив.