在javascript

时间:2016-10-24 13:29:28

标签: javascript jquery javascript-objects

在构建带有定价表的页面时,我遇到了一个反复出现的问题:我在javascript中完成的计算值会有所不同,或者会得到比它们应有的更多的十进制数。

我的定价表说明及选项:
基本价格或最低价格:95.99
选项1:10.99
选项2:21.50
折扣(预选,HTML格式): - 10%

现在,我手工完成所有计算,只添加或减去基本价格的每个选项。但即使是这个简单的数学运算,在添加和删除选项2到3次后,也会出现像110.000000012这样的结果。

我无法找到解决方案,也不知道为什么会这样。

通过尝试使用Math.round(x),我在不同的设备上看到了不同的值。

有没有办法进行一致的计算?

我为此制作了一个jsfiddle,但它不像我在localhost上那样工作。

https://jsfiddle.net/7eppecvn/

HTML

<h1>Package s: small</h1>
<input class="inline-text" type="checkbox" id="chkb_0" name="opt0Fotobuch" value="0" />
<input class="inline-text" type="checkbox" id="chkb_1" name="opt1Abzuege" value="1" />
<input class="inline-text" type="checkbox" id="chkb_2" name="discountS" value="2" checked>

<p class="inline-text">Price s: </p>
<p class="inline-text" id="PreisS"></p>
<p class="inline-text"> €</p>

<h1>Package m: medium</h1>
<input class="inline-text" type="checkbox" id="chkb_3" name="opt3Fotobuch" value="3" />
<input class="inline-text" type="checkbox" id="chkb_4" name="opt3Abzuege" value="4" />
<input class="inline-text" type="checkbox" id="chkb_5" name="discountM" value="5" checked>

<p class="inline-text">Price m: </p>
<p class="inline-text" id="PreisM"></p>
<p class="inline-text"> €</p>

<h1>Package l: large</h1>
<input class="inline-text" type="checkbox" id="chkb_6" name="opt6Fotobuch" value="6" />
<input class="inline-text" type="checkbox" id="chkb_7" name="opt7Abzuege" value="7" />
<input class="inline-text" type="checkbox" id="chkb_8" name="discountL" value="8" checked>
<p class="inline-text">Price l: </p>
<p class="inline-text" id="PreisL"></p>
<p class="inline-text"> €</p>

JS

$(document).ready(function() {

    var basispreis = [464.32, 979.93, 1667.41];
    var rabattiert = [417.89, 881.94, 1500.67];
    var aufpreis = {
        2: 46.23,
        5: 86.45,
        8: 166.47
    };
    var OptPreis = {
        0: 48.95,
        1: 18.50,
        // --
        3: 81.50,
        4: 33.50,
        // --
        6: 113.40,
        7: 62.80,
    }
    var summeS = rabattiert[0];
    var summeM = rabattiert[1];
    var summeL = rabattiert[2];

    document.querySelector('#PreisS').innerHTML = summeS;
    document.querySelector('#PreisM').innerHTML = summeM;
    document.querySelector('#PreisL').innerHTML = summeL;


    var idvalue = 0;
    //neue Funktion um Checkboxen zu prüfen
    function bindSomeCheckboxes() {

        //alert("ich bin wach");
        var score = 0;
        var checkboxes = {
            "chkb_0": 0, // Paket S
            "chkb_1": 1, // Paket S
            "chkb_2": 2, // Paket S
            // --
            "chkb_3": 3, // Paket M
            "chkb_4": 4, // Paket M
            "chkb_5": 5, // Paket M
            // --
            "chkb_6": 6, // Paket L
            "chkb_7": 7, // Paket L
            "chkb_8": 8 // Paket L
        };
        var arrayOfIds = [];
        $.each(checkboxes, function(key, val) { // populate array with ids
            arrayOfIds.push(key);
        });
        //alert(arrayOfIds[1]); //chkb_1

        // create a selector of the IDs
        $("#" + arrayOfIds.join(',#')).change(function() {

            idvalue = parseInt(this.value);
            if (this.checked) {
                // is checked
                $(this).parent().addClass("optActive");
                // --
                switch (idvalue) {
                    case 0:
                    case 1:
                        summeS += OptPreis[idvalue];
                        $('#PreisS').text(summeS);
                        break;
                    case 2:
                        $('#PreisS').text(summeS -= aufpreis[idvalue]);
                        break;
                    case 3:
                    case 4:
                        $('#PreisM').text(summeM += OptPreis[idvalue]);
                        break;
                    case 5:
                        $('#PreisM').text(summeM -= aufpreis[idvalue]);
                        break;
                    case 6:
                    case 7:
                        $('#PreisL').text(summeL += OptPreis[idvalue]);
                        break;
                    case 8:
                        $('#PreisL').text(summeL -= aufpreis[idvalue]);
                        break;
                    default:
                        alert("err def.A");
                }
            } else {
                // is unchecked
                $(this).parent().removeClass("optActive");

                switch (idvalue) {
                    case 0:
                    case 1:
                        summeS -= OptPreis[idvalue];
                        $('#PreisS').text(summeS);
                        break;
                    case 2:
                        $('#PreisS').text(summeS += aufpreis[idvalue]);
                        break;
                    case 3:
                    case 4:
                        $('#PreisM').text(summeM -= OptPreis[idvalue]);
                        break;
                    case 5:
                        $('#PreisM').text(summeM += aufpreis[idvalue]);
                        break;
                    case 6:
                    case 7:
                        $('#PreisL').text(summeL -= OptPreis[idvalue]);
                        break;
                    case 8:
                        $('#PreisL').text(summeL += aufpreis[idvalue]);
                        break;
                    default:
                        alert("err def.B");
                }
            }
        });
    }
});

0 个答案:

没有答案