Question

我使用Foundation为Mortgage计算器创建滑块，我将每个滑块连接到jQuery代码，但结果不会显示在我创建的输入上

我将它添加到jsfiddle中以实时查看：http://jsfiddle.net/to0namiSB/Ae5Y4/42/

代码低于：

    <!-- Start of Mortgage Payment Calculator -->

        <div class="row">
            <div class="small-12 large-centered columns ">
              <form>
                <fieldset>
                  <legend>Mortgage Payment Calculator</legend>
                  <div class="row">
                      <h6 class="subheader">Use our loan calculator to help you determine the loan financing amount and payment options that are best for you.</h6>
                  </div>

                  <div class="row">
                     <!-- This is the Loan Amount slider -->
                     <h6 class="subheader">Loan Amount:</h6>
                       <div class="range-slider round " data-slider data-options="display_selector: #sliderOutput5; start: 1; end: 1000000;">
                          <span class="range-slider-handle" role="slider" tabindex="0"></span>
                          <span class="range-slider-active-segment"></span>
                          <input type="hidden">
                       </div>

                    <!-- The input where the user can input an number -->
                    <div class="small-4 large-2 columns right">
                      <input type="number" id="sliderOutput5">
                    </div>
                  </div>

                  <div class="row">
                  <label>Years:</label>
                    <div class="range-slider round " data-slider data-options="display_selector: #sliderOutput3; start: 1; end: 60;">
                      <span class="range-slider-handle" role="slider" tabindex="0"></span>
                      <span class="range-slider-active-segment"></span>
                      <input type="hidden" >
                    </div>

                    <div class="small-4 large-2 columns right">
                      <input type="number" id="sliderOutput3">
                    </div>
                  </div>

                  <div class="row">
                    <!-- This is the Interest slider -->
                    <h6 class="subheader">Interest:</h6>
                    <div class="range-slider round " data-slider data-options="display_selector: #sliderOutput4;">
                      <span class="range-slider-handle" role="slider" tabindex="0"></span>
                      <span class="range-slider-active-segment"></span>
                      <input type="hidden">
                    </div>

                    <!-- The input where the user can input an number -->
                    <div class="small-4 large-2 columns right">
                      <input type="number" min="0" max="100" value="10" step=".1" id="sliderOutput4">
                    </div>
                  </div>


                  <div class="row">

                     <input type=button id="btnPostJob" class="button right" value="Calculate"></input>
                  </div>


                  <div class="row">
                    <label>Approximate Payments:</label>
                  </div>

                  <div class="row">
<label>Monthly payment: $ <span class="output" id="payment"></span></label>

 <label>Total payment: $ <span class="output" id="total"></span></label>

<label>Total interest: $ <span class="output" id="totalinterest"></span></label>
                  </div>
                  </fieldset>
              </form>
            </div>
          </div>

<!-- End of Mortgage Payment Calculator -->

jQuery部分

$(document).foundation();


      function doSum() {
        var amount = $("#sliderOutput5");
        var apr = $("#sliderOutput4");
        var years = $("#sliderOutput3");
        var payment = $("#payment");
        var total = $("#total");
        var totalinterest = $("#totalinterest");

        var principal = parseFloat($(amount).val());
        var interest = parseFloat($(apr).val()) / 100 / 12;
        var payments = parseFloat($(years).val()) * 12;

        var x = Math.pow(1 + interest, payments);
         var monthly = (principal*x*interest)/(x-1);


        document.getElementById('payment').innerHTML = monthly.toFixed(2);
        document.getElementById('total').innerHTML = (monthly * payments).toFixed(2);
        document.getElementById(totalinterest).innerHTML = ((monthly*payments)-principal).toFixed(2);


 $("#payment, #total, #totalinterest").click(doSum);

};

编辑：修复了jsfiddle链接。

Answer 1

我在这里看到三个问题：

点击事件处理程序必须位于dosum函数之外。
当您获得总兴趣元素时，＆＃39; totalinterest＆＃39;需要在引号中，即document.getElementById('totalinterest')，虽然看起来你已经在你的jsfiddle中修复了它。
假设您希望在单击＆＃34;计算＆＃34;时显示计算，则需要附加到该元素的点击处理程序而不是付款元素，即使用$("#btnPostJob").click(doSum);代替$("#payment").click(doSum);

Answer 2

您可以查看此替代解决方案。 plnkr.co/edit/hNg2gOTHa7ig2hPsrmZ8?p=preview

我无法通过jQuery显示计算器结果

2 个答案: