Select 和 Checkbox 计算器一直给出 NaN，除非两个 select 都被勾选

Question

我有一个计算器，它一直给出 NaN，除非两个 select（下拉菜单）都有一个选项 selected。

最初使用一个 select 框和两个复选框时效果很好 https://codepen.io/Chazlie/pen/NZqdXg

然后我尝试让它有两个下拉菜单，但我得到一个 NaN 除非两个下拉菜单都有一个 selection - 这可以在这里看到 https://codepen.io/Chazlie/pen/ewNBPR

注意：我不确定这是否重要，但这也是基于条件逻辑，如此处可见 https://codepen.io/Chazlie/pen/JQdGWG

我的脚本：

$(function(){


  $("select.calculate").on("change", calc);
  $("input[type=checkbox].calculate").on("click", calc);
  $("select.thisone").on("change", calc);

  function calc() {
   var basePrice = 0;
    newPrice = basePrice;

    $("select.calculate option:selected,  select.thisone option:selected, input[type=checkbox].calculate:checked").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
  }
});

这是我的HTML

<label>How long do you want the cover?</label>
  <select  name="howlongcover" class="thisone" >
       <option>Pick one!</option>
      <option data-price="55" value="valuhowlongcover"  >24 Months a </option>
      <option value="valuhowlongcover" data-price="58" >36 Months</option>
 <option value="valuhowlongcover" data-price="71" >48 Months</option>
  <option  value="valuhowlongcover" data-price="119" >60 Months</option>

    </select>
 <label>How long do you want the cover 2?</label>
  <select class="calculate" name="howlongcover">


       <option>Pick one!</option>
      <option  value="valuhowlongcover" data-price="60" >24 Months b </option>
      <option value="valuhowlongcover"data-price="65" >36 Months</option>
 <option  value="valuhowlongcover" data-price="79" >48 Months</option>
  <option value="valuhowlongcover" data-price="139" >60 Months</option>

    </select>

<BR><BR>


 Please tick if any of the following apply<br>
  <label><input class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> It's classed as a 4x4</label><BR>
  <label><input class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> The engine is more than 2.5L</label><BR>
    <label><class="calculate"  type="checkbox" name="checks" data-price="25"><span></span> It's a commercial use</label><BR>

      <BR>
     Price:  <span id="item-price">0</span>

当我添加

$("select.thisone").on("change", calc);

和

$("select.calculate option:selected,  select.thisone option:selected, input[type=checkbox].calculate:checked").each(function () {
      newPrice += parseInt($(this).data('price'), 10);
    });

和

<select  name="howlongcover" class="thisone" >

这是我开始面对 NaN 问题并且不得不对两个下拉菜单进行 selected 的时候。（在表单中永远不会有两个下拉菜单 selected 因为条件逻辑永远不会同时显示两者）

请看这支笔https://codepen.io/Chazlie/pen/ewNBPR

编辑：完全可用的 codepen 在这里 https://codepen.io/Chazlie/pen/ZdGLZm 只有一个下拉菜单适用于此。"up to £15,000" 然后 select 封面在计算器中起作用。我展示这个的原因是你可以看到我想要完成的事情

谢谢

Answer 1

您得到 NaN 是因为每当单击任何输入复选框时，都会触发 calc() 函数。 calc() 函数获取选定的选项数据以及复选框数据，并尝试从中解析一个 int。问题是，您选择的默认选项是 "Pick One!"，它没有设置任何 data-price 属性；所以当你通过 for each 循环时...

$("select.calculate option:selected, input[type=checkbox].calculate:checked").each(function () {
    newPrice += parseInt($(this).data('price'), 10);
});

... 当 "this" 引用所选选项 "Pick One!" 时，$(this).data('price') 将反过来 return undefined 作为该选项没有 data-price 属性。因此，如果您保留它并单击任一复选框，则 calc() 函数将尝试从未定义中解析一个 int，它将 return NaN，因为您无法从未定义的东西中解析整数。

您可以完全删除该选项，在 "Pick One!" 选项上添加一个 data-price="0" 属性，或者您可以添加一些条件语句以确保所选选项是一个数字：

function calc() {
var basePrice = 0;
newPrice = basePrice;

    $("select.calculate option:selected,input[type=checkbox].calculate:checked").each(function () {
      if(typeof $(this).data('price') === "number"){
        newPrice += parseInt($(this).data('price'), 10);
      }
    });

    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);

}

Select 和 Checkbox 计算器一直给出 NaN，除非两个 select 都被勾选

Select and Checkbox calculator keeps giving NaN unless both select's are ticked

checkbox

jquery

select

calculator

nan