Jquery Calculator 不断返回 NaN

Question

您好，我有一个 Jquery 计算器，但它一直返回 NaN

谁能帮忙

我确实阅读了一些关于类似问题的其他堆栈问题，并看到人们说要将 parseInt 放入 jquery，我已经尝试过但仍然得到 NaN

请注意，我也有条件逻辑（确实有效），但为了节省与我的问题无关的 100 行代码，我将其全部缩短。

用户只能选择其中一个下拉选项，不能同时选择两者。

/* * * * * * * * * * * * * * * * * *
 * Calculator
 * * * * * * * * * * * * * * * * * */
$(function() {
  $("select.cover_question10").on("change", calc);
  $("select.cover_question15").on("change", calc);

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

    $("select.cover_question10 option:selected, select.cover_question15").each(function() {
      newPrice += parseInt($(this).data('price'), 10);
    });

    var percentage = 0;
    $("input[type=checkbox].calculate:checked").each(function() {
      percentage += parseInt($(this).data('price'), 10);
    });
    newPrice = newPrice + (newPrice * percentage / 100);
    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
    $("#price").val(newPrice);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>How long do you want the cover 10?</label>
<select class="select cover_question10" name="cover_question10" id="cover_question">
  <option id="cover" value="Select">Select cover</option>
  <option id="cover_12" value="cover_12" data-price="90.76" data-capacity="12 Months Cover">12 Months Cover </option>
  <option id="cover_24" value="cover_24" data-price="124.50" data-capacity="24 Months Cover">24 Months Cover</option>
  <option id="cover_36" value="cover_36" data-price="135" data-capacity="36 Months Cover">36 Months Cover</option>
</select>

<br><br>
<label>How long do you want the cover 15?</label>
<select class="select cover_question15" name="cover_question15" id="cover_question">
  <option id="cover" value="Select">Select cover</option>
  <option id="cover_12" value="cover_12" data-price="104.26" data-capacity="12 Months Cover">12 Months Cover </option>
  <option id="cover_24" value="cover_24" data-price="145.50" data-capacity="24 Months Cover">24 Months Cover</option>
  <option id="cover_36" value="cover_36" data-price="195" data-capacity="36 Months Cover">36 Months Cover</option>
</select>
<br><br> £

<span id="item-price">0.00</span>

这也是我的小提琴
https://jsfiddle.net/0ajo48ne/

Answer 1

<label>How long do you want the cover 10?</label>
<select
  class="select cover_question10"
  name="cover_question10"
  id="cover_question"
>
  <option id="cover" value="Select" data-price="0">Select cover</option>
  <option
    id="cover_12"
    value="cover_12"
    data-price="90.76"
    data-capacity="12 Months Cover"
  >
    12 Months Cover
  </option>
  <option
    id="cover_24"
    value="cover_24"
    data-price="124.50"
    data-capacity="24 Months Cover"
  >
    24 Months Cover
  </option>
  <option
    id="cover_36"
    value="cover_36"
    data-price="135"
    data-capacity="36 Months Cover"
  >
    36 Months Cover
  </option>
</select>

<br /><br />
<label>How long do you want the cover 15?</label>
<select
  class="select cover_question15"
  name="cover_question15"
  id="cover_question"
>
  <option id="cover" value="Select" data-price="0">Select cover</option>
  <option
    id="cover_12"
    value="cover_12"
    data-price="104.26"
    data-capacity="12 Months Cover"
  >
    12 Months Cover
  </option>
  <option
    id="cover_24"
    value="cover_24"
    data-price="145.50"
    data-capacity="24 Months Cover"
  >
    24 Months Cover
  </option>
  <option
    id="cover_36"
    value="cover_36"
    data-price="195"
    data-capacity="36 Months Cover"
  >
    36 Months Cover
  </option>
</select>
<br /><br />
£

<span id="item-price">0.00</span>



$(function () {
  $("select.cover_question10").on("change", calc);
  $("select.cover_question15").on("change", calc);

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

    $("select.cover_question10, select.cover_question15")
      .find("option:selected")
      .each(function () {
        newPrice += parseInt($(this).data("price"), 10);
      });

    var percentage = 0;
    $("input[type=checkbox].calculate:checked").each(function () {
      percentage += parseInt($(this).data("price"), 10);
    });
    newPrice = newPrice + (newPrice * percentage) / 100;
    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
    $("#price").val(newPrice);
  }
});

Answer 2

您在一个选择框上选择了选定的选项，但在另一个选择框本身上选择了该选项。这导致 1 个data-pirce 属性始终为undefined。改正的时候。还添加了一个 if 语句来检查是否设置了有效值。

/* * * * * * * * * * * * * * * * * *
 * Calculator
 * * * * * * * * * * * * * * * * * */
$(function() {
  $("select.cover_question10").on("change", calc);
  $("select.cover_question15").on("change", calc);

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

    $("select.cover_question10 option:selected, select.cover_question15 option:selected").each(function() {
      console.log();
      if(/^[\.\d]+$/.test($(this).data('price'))) {
        newPrice += parseFloat($(this).data('price'), 10);
      }
    });

    var percentage = 0;
    $("input[type=checkbox].calculate:checked").each(function() {
      percentage += parseInt($(this).data('price'), 10);
    });
    newPrice = newPrice + (newPrice * percentage / 100);
    newPrice = newPrice.toFixed(2);
    $("#item-price").html(newPrice);
    $("#price").val(newPrice);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>How long do you want the cover 10?</label>
<select class="select cover_question10" name="cover_question10" id="cover_question">
  <option id="cover" value="Select">Select cover</option>
  <option id="cover_12" value="cover_12" data-price="90.76" data-capacity="12 Months Cover">12 Months Cover </option>
  <option id="cover_24" value="cover_24" data-price="124.50" data-capacity="24 Months Cover">24 Months Cover</option>
  <option id="cover_36" value="cover_36" data-price="135" data-capacity="36 Months Cover">36 Months Cover</option>
</select>

<br><br>
<label>How long do you want the cover 15?</label>
<select class="select cover_question15" name="cover_question15" id="cover_question">
  <option id="cover" value="Select">Select cover</option>
  <option id="cover_12" value="cover_12" data-price="104.26" data-capacity="12 Months Cover">12 Months Cover </option>
  <option id="cover_24" value="cover_24" data-price="145.50" data-capacity="24 Months Cover">24 Months Cover</option>
  <option id="cover_36" value="cover_36" data-price="195" data-capacity="36 Months Cover">36 Months Cover</option>
</select>
<br><br> £

<span id="item-price">0.00</span>