Question

我已经开始创建一个简单的月度付款估算工具，我发现了一个奇怪的错误，只有在我更改术语选择选项时才会发生。如果您使用滑块，则每月付款更新，并通过.digits()方法在号码中添加逗号。但是，当您更改#loan__term时，它会完全清除该数字。必须与.change()和.digits()发生冲突，因为如果我将其删除，则.change()方法会按预期工作。有什么想法吗？

    $(document).ready(function() {
  $.fn.digits = function() {
    return this.each(function() {
      $(this).text(
        $(this)
          .text()
          .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
      );
    });
  };

  function updateMonthlyPayment() {
    $loanAmount = $("#loan__amount span").html();
    $loanTerm = $("#loan__term option:selected").val();
    if ($loanTerm == "for 24 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.045878 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 36 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.032 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 48 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.025085 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 60 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.020963 / 100 * 100))
        .digits();
    }
  }

  $("#loan__amount__slider").slider({
    max: 125000,
    min: 5000, 
    step: 1000,
    value: 50000,
    create: function(event, ui) {
      $("#loan__amount__num")
        .position({
          my: "center bottom",
          at: "center top",
          of: ui.handle,
          offset: "0, 10"
        });
    },
    slide: function(event, ui) {
      $("#loan__amount span").html(ui.value);
      $("#loan__amount__num span").html(ui.value);
      updateMonthlyPayment();
      $("#loan__amount span").digits();
      $("#loan__amount__num span").digits();

      var delay = function() {
        var handleIndex = $(ui.handle).data("index.uiSliderHandle");
        $("#loan__amount__num")
          .position(
            {
              my: "center bottom",
              at: "center top",
              of: ui.handle,
              offset: "0, 10"
            }
          );
      };

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    }
  });

  $("#loan__term").change(updateMonthlyPayment);
});

Codepen：https://codepen.io/jrayhartley/pen/BVjdbM

Answer 1

带滑块的

- ＆gt;首先计算费率，然后做数字选择 - ＆gt;根据数字计算

所以它的40000带滑块，“40,000”带选择

快速而肮脏的修复 https://codepen.io/anon/pen/vrLwPM?editors=1111

  function updateMonthlyPayment() {
   $loanAmount = $("#loan__amount span").html().replace(",","");
     $loanTerm = $("#loan__term option:selected").val();
    if ($loanTerm == "for 24 months") {
        $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.045878 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 36 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.032 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 48 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.025085 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 60 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.020963 / 100 * 100))
        .digits();
    }
  }

Answer 2

问题在于：

您更改列表中的所选项目
$("#loan__term").change(…)来电updateMonthlyPayment()，
$loanAmount = $("#loan__amount span").html();＆lt; - 问题

使用html已更改#loan__amount span的{{1}}。所以无法进行计算。

这就是为什么当您评论.digits()行时，它会起作用。

这是一个有效的代码集https://codepen.io/anon/pen/QxyXOq，其中：

我使用… .digits()属性来存储未格式化的值
我试图简化其他事情

希望它有所帮助。

Answer 3

最棘手的问题是您没有将数据与演示文稿分开。将格式化值放在跨度中，然后从跨度中读取值（而不是使用变量）是一个非常糟糕的主意并且容易出错。

当你在<select>中使用值时，比较字符串也是如此。您应该直接从滑块中获取值，并直接从select中获取值。

我彻底检查了代码：

const interest = {
  "24": 0.045878,
  "36": 0.032,
  "48": 0.025085,
  "60": 0.020963
};

const loan = {
  min: 5000,
  max: 125000,
  step: 1000
};

var initialAmount = 50000;

$.fn.dollars = function() {
  return this.each(function() {
    var n = Number(this.innerHTML || this.value).toLocaleString("en-US");
    $(this).text("$" + n);
  });
};

function updateMonthlyPayment() {
  var loanAmount = $("#loan__amount__slider").slider("option", "value");
  var loanTerm = $("#loan__term").val();
  $("#monthly__payment")
    .html(Math.floor(loanAmount * interest[loanTerm]))
    .dollars();
}

$(document).ready(function() {
  $("#loan__amount, #loan__amount__num")
    .text(initialAmount)
    .dollars();
  $("#loan__min")
    .text(loan.min)
    .dollars();
  $("#loan__max")
    .text(loan.max)
    .dollars();

  $("#loan__term").change(updateMonthlyPayment);

  $("#loan__amount__slider").slider({
    max: loan.max,
    min: loan.min,
    step: loan.step,
    value: initialAmount,
    slide: function(event, ui) {
      $("#loan__amount").text(ui.value).dollars();
      $("#loan__amount__num").text(ui.value).dollars();
      updateMonthlyPayment();

      var delay = function() {
        var handleIndex = $(ui.handle).data("index.uiSliderHandle");
        $("#loan__amount__num").position({
          my: "center bottom",
          at: "center top",
          of: ui.handle,
          offset: "0, 10"
        });
      };

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    }
  });
  updateMonthlyPayment();
});

#loan__amount__num {
  display: inline-block;
  position: relative;
}

#loan__min {
  float: left;
}

#loan__max {
  float: right;
}

#slider-box {
  background-color: #ccc;
  overflow: auto;
}

<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

<h3>Financing Amount</h3>
<div id="slider-box">
  <div id="loan__amount__num" style="left: calc(37.5% - 25px);"></div>
  <div id="loan__amount__slider"></div>
  <div id="loan__min"></div>
  <div id="loan__max"></div>
</div>
<p>Amount: <span id="loan__amount"></span></p>

<h3>Estimated Monthly Payment</h3>
<div id="monthly__payment"></div>

<select id="loan__term">
  <option value="24">for 24 months</option>
  <option value="36" selected="selected">for 36 months</option>
  <option value="48">for 48 months</option>
  <option value="60">for 60 months</option>
</select>

Answer 4

使用

$loanAmount = parseFloat($("#loan__amount span").html().replace(',',''));

你的$（）。html（）返回＆＃34; 50,000＆＃34;然后，当你去做数学时，你得到NaN，当你设置$（）。html（NaN）时，你得到一个空白。要解决此问题，您可以删除＆＃34;，＆＃34;通过使用替换函数然后解析值。

调试这个（希望能帮助你学习调试:)我只是在html（）之前使用了console.log（）语句，它应该将某些东西写入单元格（找到NaN代替！），并回到你的数学...然后回到＆＃34; 50,000＆＃34;导致错误。

.change（）导致删除元素内容

4 个答案: