jquery函数坏了 - 没有更新onchange

时间：2015-09-25 09:34:16

标签： javascript jquery html

该页面是一个样本抵押贷款计算器，带有一个表格，显示所选输入的每月还款。 我使用了之前制作的抵押贷款计算器中的脚本，您可以在<input type="number">手动输入利率。 我现在想要解析<td>的利率，并在同一<tr>中进行计算并输出到每月还款列。

我把代码搞砸了，因为这不再适用了吗？

它还没有更新表格中输入的更新，这可以修复吗？

$(document).ready(function() {
    $("#type :checkbox").click(function() {
        $("td").parent().hide();
        $("#type :checkbox:checked").each(function() {
            $("." + $(this).val()).parent().show();
        });
    });
    $("#fee :checkbox").click(function() {
        $("td").parent().hide();
        $("#fee :checkbox:checked").each(function() {
            $("." + $(this).val()).parent().show();
        });
    });
});

window.onload = function() {
    document.repaymentcalc.homevalue.onchange = repayment;
    document.repaymentcalc.loanamount.onchange = repayment;
    document.repaymentcalc.interestrate.onchange = repayment;
    document.repaymentcalc.numberpayments.onchange = repayment;

    // populate repayment in table
    $('tbody tr').each(function(idx, row) {
        var $row = $(row);
        var initialRateCell = $row.find('td')[2]; // get column 4 (for the inital rate)
        var repaymentCell = $row.find('td').last() // get the output cell (last in the row)
        var rate = parseFloat($(initialRateCell).html()); // parse the rate from the rate cell
        var repaymentVal = computeRepayment(rate); // compute the new repayment value
        console.log(repaymentVal)
        $(repaymentCell).html(repaymentVal.repayment); // stick it in the result cell
    });
}

function computeRepayment(rate) {
    // if the passed in rate is available, use it. 
    // otherwise pull it from document.repaymentcalc
    var rate = rate || document.repaymentcalc.interestrate.value
    var x = parseInt(document.repaymentcalc.loanamount.value, 10);
    var y = parseInt(rate * 100, 10) / 120000;
    var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
    var h = parseInt(document.repaymentcalc.homevalue.value, 10);

    var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);

    var loantovalue = x / h * 100;

    var year = z / 12;
    return {
        repayment: repayment,
        loantovalue: loantovalue,
        year: year
    }
}

function repayment(rate){
    var repaymentInfo = computeRepayment(rate);
    document.getElementById("repayments").innerHTML = 'Monthly Repayment: £' + repaymentInfo.repayment.toFixed(2);
    document.getElementById("ltv").innerHTML = 'Loan to Value: ' + repaymentInfo.loantovalue.toFixed(1) + '%';
    document.getElementById("years").innerHTML = repaymentInfo.year + ' years';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="type">
    <p id="Mortgage Type">Mortgage Type</p>
    <input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed
    <br>
    <input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed
    <br>
    <input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed
    <br>
    <input type="checkbox" name="type" value="t9" id="t9" />Tracker
    <br>
    <input type="checkbox" name="type" value="t1" id="t1" checked/>All
    <br>
</section>

<section id="fee">
    <p id="Fee">Fee</p>
    <input type="checkbox" name="fee" value="f2" id="f2" />Fee
    <br>
    <input type="checkbox" name="fee" value="f3" id="f3" />No Fee
    <br>
    <input type="checkbox" name="fee" value="f1" id="f1" checked/>All
    <br>
</section>

<form name="repaymentcalc" action="">
    </br>
    <p>
        Home Value £
        <input type="number" id="homevalue" value="250000" style="width: 75px">
    </p>

    <p>
        Loan Amount £
        <input type="number" id="loanamount" value="200000" style="width: 75px">
    </p>

    Term
    <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">
    <div id="years" style="display:inline-block;">25 years</div>

    <p>
    <div id="ltv">Loan to Value: 80.0%</div>

    </div>
</form>

<br>

<div id="mortgagediv">
    <table id="mortgagetable">
        <thead>
            <tr class="productheader">
                <th class="lender">Lender</th>
                <th class="type">Type</th>
                <th class="inititalrate">Initial Rate (%)</th>
                <th class="svr">SVR (%)</th>
                <th class="apr">Overall APR (%)</th>
                <th class="fee">Fee (£)</th>
                <th class="ltv">LTV (%)</th>
                <th class="repayment">Monthly Repayment (£)</th>
            </tr>
        </thead>
        <tbody>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t2">2yr Fixed</td>
            <td class="tg-031e">1.64</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f3"></td>
            <td class="tg-031e">70</td>
            <td class="tg-031e"></td>
        </tr>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t3">3yr Fixed</td>
            <td class="tg-031e">1.69</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f3"></td>
            <td class="tg-031e">75</td>
            <td class="tg-031e"></td>
        </tr>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t5">5yr Fixed</td>
            <td class="tg-031e">1.79</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f3"></td>
            <td class="tg-031e">80</td>
            <td class="tg-031e"></td>
        </tr>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t9">Tracker</td>
            <td class="tg-031e">1.64</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f3"></td>
            <td class="tg-031e">70</td>
            <td class="tg-031e"></td>
        </tr>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t2">2yr Fixed</td>
            <td class="tg-031e">1.69</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f2">999</td>
            <td class="tg-031e">75</td>
            <td class="tg-031e"></td>
        </tr>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t3">3yr Fixed</td>
            <td class="tg-031e">1.79</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f2">999</td>
            <td class="tg-031e">80</td>
            <td class="tg-031e"></td>
        </tr>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t5">5yr Fixed</td>
            <td class="tg-031e">1.79</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f2">999</td>
            <td class="tg-031e">80</td>
            <td class="tg-031e"></td>
        </tr>
        <tr class="product">
            <td class="tg-031e">Nationwide</td>
            <td class="t1 t9">Tracker</td>
            <td class="tg-031e">1.79</td>
            <td class="tg-031e">3.99</td>
            <td class="tg-031e">3.40</td>
            <td class="f1 f2">999</td>
            <td class="tg-031e">80</td>
            <td class="tg-031e"></td>
        </tr>
        </tbody>
    </table>
</div>

2 个答案:

答案 0 :(得分：1)

如果你在

中抛出一个调试器

Mage::log('$items has the following -- '.print_r($items), null, 'proofLog.log');

你会注意到你永远不会进入这个功能

尝试将该功能放在window.onload = function() {

中

你的onchange的赋值也是无效的，我已经把它作为一个jquery选择器

http://jsfiddle.net/eood7x1b/2/ 

document.ready

答案 1 :(得分：1)

好的，我可以让它解析<td>的利率，但在更改<input type="number" id="loanamount">或<input type="number" id="homevalue">中的值时仍然不会改变？

$(document).ready(function() {
  $("#type :checkbox").click(function() {
    $("td").parent().hide();
    $("#type :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
  $("#fee :checkbox").click(function() {
    $("td").parent().hide();
    $("#fee :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
});

window.onload = function() {
  document.repaymentcalc.homevalue.onchange = repayment;
  document.repaymentcalc.loanamount.onchange = repayment;
  document.repaymentcalc.numberpayments.onchange = repayment;

  $('tbody tr').each(function(idx, row) {
    var $row = $(row);
    var initialRateCell = $row.find('td')[2];
    var repaymentCell = $row.find('td').last()
    var rate = parseFloat($(initialRateCell).html());
    var repaymentVal = computeRepayment(rate);
    console.log(repaymentVal)
    $(repaymentCell).html(repaymentVal.repayment);
  });
}

function computeRepayment(rate) {
  var x = parseInt(document.repaymentcalc.loanamount.value, 10);
  var y = parseInt(rate * 100, 10) / 120000;
  var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
  var h = parseInt(document.repaymentcalc.homevalue.value, 10);

  var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);

  var loantovalue = x / h * 100;

  var year = z / 12;
  return {
    repayment: repayment,
    loantovalue: loantovalue,
    year: year
  }
}

function repayment(rate) {
  var repaymentInfo = computeRepayment(rate);
  document.getElementById("repayments").innerHTML = 'Monthly Repayment: £' + repaymentInfo.repayment.toFixed(2);
  document.getElementById("ltv").innerHTML = 'Loan to Value: ' + repaymentInfo.loantovalue.toFixed(1) + '%';
  document.getElementById("years").innerHTML = repaymentInfo.year + ' years';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed
  <br>
  <input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed
  <br>
  <input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed
  <br>
  <input type="checkbox" name="type" value="t9" id="t9" />Tracker
  <br>
  <input type="checkbox" name="type" value="t1" id="t1" checked/>All
  <br>
</section>

<section id="fee">
  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="f2" id="f2" />Fee
  <br>
  <input type="checkbox" name="fee" value="f3" id="f3" />No Fee
  <br>
  <input type="checkbox" name="fee" value="f1" id="f1" checked/>All
  <br>
</section>

<form name="repaymentcalc" action="">
  </br>
  <p>
    Home Value £
    <input type="number" id="homevalue" value="250000" style="width: 75px">
  </p>

  <p>
    Loan Amount £
    <input type="number" id="loanamount" value="200000" style="width: 75px">
  </p>

  Term
  <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">
  <div id="years" style="display:inline-block;">25 years</div>

  <p>
    <div id="ltv">Loan to Value: 80.0%</div>

    </div>
</form>

<br>

<div id="mortgagediv">
  <table id="mortgagetable">
    <thead>
      <tr class="productheader">
        <th class="lender">Lender</th>
        <th class="type">Type</th>
        <th class="inititalrate">Initial Rate (%)</th>
        <th class="svr">SVR (%)</th>
        <th class="apr">Overall APR (%)</th>
        <th class="fee">Fee (£)</th>
        <th class="ltv">LTV (%)</th>
        <th class="repayment">Monthly Repayment (£)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t2">2yr Fixed</td>
        <td class="tg-031e">1.64</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">70</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t3">3yr Fixed</td>
        <td class="tg-031e">1.69</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">75</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t5">5yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t9">Tracker</td>
        <td class="tg-031e">1.64</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">70</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t2">2yr Fixed</td>
        <td class="tg-031e">1.69</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">75</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t3">3yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t5">5yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t9">Tracker</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
    </tbody>
  </table>
</div>

相关问题
最新问题