在构建带有定价表的页面时,我遇到了一个反复出现的问题:我在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");
}
}
});
}
});