Question

我正在使用jquery.calculation在页面上添加元素。我的javascript的第一部分为255产品添加了这些。

这是我到目前为止的javascript：

$(document).ready(function(){

$(".calcTotal").click(
function (){
    // get the sum of the elements
    var studio255_photocopier = $("#studio255_photocopier").sum();
    var sum_checkbox255 = $(".checkbox_sum255:checked").sum();
    var qty255 = $(".qty255").sum();
    var single_total255 = ((studio255_photocopier + sum_checkbox255) * qty255);

    if ($('.sorting_stapling255').is(':checked'))
    {
      var lease_sorting_stapling255 = "25.88";
    };

    if ($('.wake_up_fax255').is(':checked'))
    {
      var lease_wake_up_fax255 = "29.41";
    };

    if ($('.extra_2500_tray255').is(':checked'))
    {
      var lease_extra_2500_tray255 = "24.35";
    };

    var lease_single_total255 = ((lease_extra_2500_tray255 + lease_wake_up_fax255 + extra_2500_tray255) * qty255);

    // Grand total sum
    var grand_total = (single_total255);
    var lease_total = (lease_single_total255);
    // update the total
    $("#grand_total").text("£" + grand_total.toFixed(2));
    $("#lease_total").text("£" + lease_total.toFixed(2));
    }
);

});

这也是我正在使用的hmtl：

<div class="details options">
                    <h1>Addtional Options functionality</h1><span>choose your upgrades here:</span>
                    <div class="clear"></div>
                    <form id="studio255">
                    <input class="sum255" type="hidden" id="studio255_photocopier" value="1538.24" />
                    <label><input class="checkbox_sum255 sorting_stapling255" type="checkbox" id="studio255_sorting_stapling" name="sorting_stapling255" value="278.3" />
                    Sorter/Stapler</label>
                    <label><input class="checkbox_sum255 wake_up_fax255" type="checkbox" id="studio255_wake_up_fax" name="studio255_wake_up_fax" value="316.25" />
                    Walk Up Fax Kit</label>
                    <label><input class="checkbox_sum255 extra_2500_tray255" type="checkbox" id="studio255_extra_2500_tray" name="studio255_extra_2500_tray" value="261.86" />
                    Extra 2500 large capacity paper tray</label>
                    <div class="clear"></div>
                </div> <!-- details -->

                <div class="details amount">
                    <p>Specify the number of machines you require, the total price will be calculated automatically (displayed at the bottom of this page):</p>
                    <label>Price
                    <input type="number" id="photocopierTotal_255" class="price" name="studio255_price" /></label>
                    <label>Qty
                    <input class="qty255" type="number" id="studio255_quantity" name="studio255_quantity" /></label>
                    <input id="btnClear" type="reset" value="clear" />
                    <input class="calcTotal" type="button" value="calculate" />
                    </form>
                    <div class="clear"></div>
                </div> <!-- details -->

<p>Your total cost is&nbsp;&nbsp;&nbsp;<span id="grand_total"></span><br />
        Your total lease cost is&nbsp;&nbsp;&nbsp;<span id="lease_total"></span></p>

下一点是我陷入困境的地方。因为他们想要一个租赁价格我以为我会检查何时检查相关的复选框并为每个复选框填充另一个变量然后将它们添加起来。但由于某种原因，只有当我有任何一个复选框检查但不超过一个时，它才有效，如果我有多个支票，它会在租赁总额中给我NaN。

javascript的底部只是添加总计，然后限制为2位小数。

我确定我的javascript有点粗糙，也许我做的事情显然是错误的。

Answer 1

您正在“添加”之前指定的字符串：

（“12.34”+“56.78”）* 9 ===“12.3456.78”* 9“==”NaN * 9“==”NaN。

下次，在“框架”之前学习编程语言。 jQuery是不是一种语言;你没有在 jQuery中编写。还有没有“javascript”：MDN: JavaScript

Answer 2

正如PointedEars指出的那样，你在这里添加字符串。 +运算符适用于字符串和数字。如果等式的任何一边是一个字符串，那么这两个部分是连接，如果两个部分都是数字，那么只有它们添加。

var str  = "3.3";
var num1 = 1.1;
var num2 = 1.2;

str + str;   // String: "3.33.3"
str + num1;  // String: "3.31.1"
num1 + num2; // Number: 2.3

然后，当你乘以你的字符串时，结果被强制转换为数字，但是，在你的情况下，因为你的字符串类似于“3.33.3”，这是一个无效数字因此，结果是NaN < / p>

"3.33.3" * 2 // NaN

答案是确保您首先使用数字。将您定义数字字符串的所有位置更改为实际数字：

var lease_sorting_stapling255 = 25.88;

或者，如果值来自您的表单，您可能必须将它们解析为数字。为此，您可以使用parseInt或parseFloat，具体取决于您是否需要小数位。

parseFloat("25.88");  // 25.88
parseInt("25.88", 10);  // 25

parseInt的第二个参数非常重要，因为它定义了数字的基数。没有它，数字可以解析为八进制或十六进制。

parseInt("007");  // 7
parseInt("008");  // 8
parseInt("009");  // 9
parseInt("010");  // 8 !!
parseInt("010", 10); // 10

选中复选框后填充变量，然后将它们一起添加 - 获取NaN

2 个答案: