Jquery没有生成/添加内容

时间：2014-11-20 08:42:06

标签： javascript jquery html

我创建了一个检查select字段并相应生成html的函数。问题是它似乎没有起作用，而且我很困难。我立刻注意到的一件事是，选择字段没有获得他们应该的类，即“智能”/“弹性”，请查看它，非常感谢任何和所有帮助。

Js Fiddle

JQUERY 

jQuery(document).ready(function ($) {

  // Calculates interest for smart loan
  function smart_interest($desired_interest) {
    return (($desired_interest * 13) + 0.997) / 13;
  }

  // Calculates periodic payment for smart loan
  function pmt_value($interest_rate, $pay_period, $present_value) {
    return Math.round($present_value * ($interest_rate / (1 - Math.pow((1 + $interest_rate), -$pay_period))));
  }

  // div within popup to apply data
  var info_div = $('div.jcontent'),
    // dropdowns
    selected_option = $('.loanCalc select.loan-type option:selected'),
    selected_amount = $('.loanCalc select.loan option:selected'),
    selected_plan = $('.loanCalc select.loan-type'),
    months = [6,12,18,24];

  function calc_rates() {
    if (selected_plan.hasClass('smart')) {
      // user's present value - loan amount
      var pv = selected_amount.val(),
          payments = {};
      // if - check pv range 
      if (pv < 999) {
        // interest
        var interest = 0.10,
        // smart interest
        smart_interest = smart_interest(interest);
        // each payment
        for(var i = 0, len = months.length; i < len; i++) {
          var payment = pmt_value(smart_interest, months[i], pv);
              payments[i] = payment;
          // return object loaded with payments
              return payments;
        }
      }
      else if (1000 <= pv < 4999) {
        // interest
        var interest = 0.09,
        // smart interest
        smart_interest = smart_interest(interest);
        // each payment
        for(var i = 0, len = months.length; i < len; i++) {
          var payment = pmt_value(smart_interest, months[i], pv);
              payments[i] = payment;
          // return object loaded with payments
              return payments;
        }
      }
      else if (5000 <= pv <= 10000) {
        // interest
        var interest = 0.08,
        // smart interest
        smart_interest = smart_interest(interest);
        // each payment
        for(var i = 0, len = months.length; i < len; i++) {
          var payment = pmt_value(smart_interest, months[i], pv);
              payments[i] = payment;
          // return object loaded with payments
              return payments;
        }
      }
    } else if (selected_plan.hasClass('flex')) {
      // user's present value - loan amount
      var pv = selected_amount.val(); 
      if (pv < 999) {
        // interest
        var interest = 0.15;
        // return interest of price 
        return pv * interest;
      }
      else if (1000 <= pv < 4999) {
        var interest = 0.125;
        // return interest of price 
        return pv * interest;
      }
      else if (5000 <= pv <= 10000) {
        var interest = 0.950;
        // return interest of price 
        return pv * interest;
      }
    }
  }

  // Upon Change of the dropdown fields - check both arent default
  $('div.loanCalc .loan-type','div.loanCalc .loan').change(function(){
    if(selected_option.val() == "5") {
    selected_plan.removeClass('smart');
    selected_plan.addClass('flex');
  }
  else if(selected_option.val() == "2") {
    selected_plan.removeClass('flex');
    selected_plan.addClass('smart');
  }
    if($('div.loanCalc .loan-type').val() !== 0 && $('div.loanCalc .loan').val() !== 0) {
      // for smart plan
      if (selected_plan.hasClass('smart')) {
        var payments = calc_rates(),
        html = "<ul><li>$" + payments[0] + " 6 month plan</li><li>$" + payments[1] + " 12 month plan</li><li>$" + payments[2] + " 18 month plan</li><li>$" + payments[3] + " 24 month plan</li></ul>";
        // Container for content
        info_div.append(html);
    }
      else if (selected_plan.hasClass('flex')) {
        var payment = calc_rates(),
        html = "<p class = 'flex-cost'>$" + payment + "</p>";
        info_div.append(html);
      }
    }
  });
});

HTML 

<div class="loanCalc">
  <div class="loanPlan">
    <select name="loanType" class="loan-type empty">
      <option value="0" disabled="" selected="">Loan Type Desired</option>
      <option value="5" class = "flex">30 Day Flexible Loan</option>
      <option value="2" class = "smart">Smart Pay Installment Loan</option>
    </select>
  </div>
  <div class="loanAmount">
    <select name="loanAmount" class="loan empty">
      <option value="0" disabled="" selected="">Loan Amount Desired</option>
      <option value="750">$750</option>
      <option value="800">$800</option>
      <option value="850">$850</option>
      <option value="900">$900</option>
      <option value="950">$950</option>
      <option value="1000">$1000</option>
      <option value="1250">$1250</option>
      <option value="1500">$1500</option>
      <option value="1750">$1750</option>
      <option value="2000">$2000</option>
      <option value="2250">$2250</option>
      <option value="2500">$2500</option>
      <option value="2750">$2750</option>
      <option value="3000">$3000</option>
      <option value="3250">$3250</option>
      <option value="3500">$3500</option>
      <option value="3750">$3750</option>
      <option value="4000">$4000</option>
      <option value="4250">$4250</option>
      <option value="4500">$4500</option>
      <option value="5000">$5000</option>
      <option value="5500">$5500</option>
      <option value="6000">$6000</option>
      <option value="6500">$6500</option>
      <option value="7000">$7000</option>
      <option value="7500">$7500</option>
      <option value="8000">$8000</option>
      <option value="8500">$8500</option>
      <option value="9000">$9000</option>
      <option value="9500">$9500</option>
      <option value="10000">$10000</option>
    </select>
    <p class="info-one">Monthly Payment</p>
    <div class="jcontent"></div>
    <p class="info-two"><span class="span">Monthly payment includes principal   
    and interest. Your loan balance is  
    zero at the end of the plan</span>
    <span class="flex">Monthly Payment is interest only and 
    does not pay down the loan balance</span>
    </p>
  </div>
</div>

2 个答案:

答案 0 :(得分：3)

更改$('select.loan-type' , 'select.loan').change(function(){

到

$('select.loan-type , select.loan').change(function(){

或者选择器不会发生事件。

您还需要在更改后初始化变量的值：

$('select.loan-type , select.loan').change(function(){
    selected_option = $('.loanCalc select.loan-type option:selected'),
    selected_amount = $('.loanCalc select.loan option:selected'),
    selected_plan = $('.loanCalc select.loan-type'),
    months = [6,12,18,24];
    if(selected_option.val() == "5") {
    selected_plan.removeClass('smart');
    selected_plan.addClass('flex');
  }

我也不确定你要在这里做什么：

var interest = 0.10,

这会产生错误。您可能需要将var interest = 0.10,更改为var interest = 0.10;以及您放置,而不是;的其他地方

也在这个for循环中，你在第一次迭代后立即返回一个值：

for(var i = 0, len = months.length; i < len; i++) {
          var payment = pmt_value(smart_interest, months[i], pv);
              payments[i] = payment;
          // return object loaded with payments
              return payments;
        }

这个以及它具有相同循环的任何其他地方应该改为：

for(var i = 0, len = months.length; i < len; i++) {
          var payment = pmt_value(smart_interest, months[i], pv);
              payments[i] = payment;
        }
// return object loaded with payments
              return payments;

并且任何smart_interest = smart_interest(interest);都应更改为s_interest = smart_interest(interest);，您无法在函数名称中调用变量名称，它通常编码错误。

我也不确定这是否是您想要的，但为了更改info_div的内容而不是每次更改都附加，您需要将info_div.append(html);替换为{ {1}}（再次使用其他名称替换此处名为info_div.html(html);的变量，即使它正在解决原因）。

看到这个完全有效 JSFiddle

答案 1 :(得分：2)

 selected_option = $('.loanCalc select.loan-type option:selected'),

此行是问题的一部分。 selected_option包含在开头选择的选项。如果更改了选择框，则selected_option仍保留值为“0”的选项。

我建议如下。使用ID

更改HTML 
  <select name="loanType" class="loan-type empty" id="loan_type">
      <option value="0" disabled="" selected="">Loan Type Desired</option>
      <option value="5" class = "flex">30 Day Flexible Loan</option>
      <option value="2" class = "smart">Smart Pay Installment Loan</option>
    </select>

然后查询id：

   var loanType = $("#loan_type");
     ...
     if (loanType.val() == "2") {
         //do stuff
     } else if (loanType.val() == "5") {
         //do other stuff
     }

此外，必须遵循Edan Feiles的回答。

  

更改$（'select.loan-type'，'select.loan'）。change（function（）{

     

到

     

$（'select.loan-type，select.loan'）。change（function（）{

相关问题
最新问题