Javascript Jquery没有按应有的方式生成/添加内容

我创建了一个函数来检查select字段并相应地生成html。问题是它似乎不起作用，我被卡住了。我立即注意到的一件事是，选择字段没有获得它们应该获得的类，即“smart”/“flex”，请检查它，非常感谢所有帮助

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

更改$'select.loan type'，'select.loan'。更改函数{

到

$'select.loan-type，select.loan'。更改函数{

否则选择器将不会触发事件

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

$('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利息=0.10

这就产生了一个错误。您可能需要将var利息=0.10更改为var利息=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\u interest=smart\u InterestInTest；都应该更改为s\u interest=smart\u InterestInTest；不能在函数名中调用变量名，这通常是糟糕的编码

我也不确定这是否是您想要的，但为了更改info_div的内容，而不是每次更改都附加到它，您需要将info_div.appendhtml；替换为info_div.htmlhtml；再次将名为html的变量替换为其他名称，即使它正在工作，这也是为什么

看到这一切了吗

更改$'select.loan type'，'select.loan'。更改函数{

到

$'select.loan-type，select.loan'。更改函数{

否则选择器将不会触发事件

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

$('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利息=0.10

这就产生了一个错误。您可能需要将var利息=0.10更改为var利息=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\u interest=smart\u InterestInTest；都应该更改为s\u interest=smart\u InterestInTest；不能在函数名中调用变量名，这通常是糟糕的编码

我也不确定这是否是您想要的，但为了更改info_div的内容，而不是每次更改都附加到它，您需要将info_div.appendhtml；替换为info_div.htmlhtml；再次将名为html的变量替换为其他名称，即使它正在工作，这也是为什么

看到这一切了吗

此行是问题的一部分。选定的\u选项保留在开始时选定的选项项。如果更改了选择框，选定的\u选项仍保留值为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>  

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

更改$'select.loan type'，'select.loan'。更改函数{

到

$'select.loan-type，select.loan'。更改函数{

此行是问题的一部分。选定的\u选项保留在开始时选定的选项项。如果更改了选择框，选定的\u选项仍保留值为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>  

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

更改$'select.loan type'，'select.loan'。更改函数{

到

$'select.loan-type，select.loan'。更改函数{

---

当页面加载时，而不是在用户从下拉列表中选择某个内容之后，您正在设置所有选定的_XXX变量。在JSFIDLE中，您有一个名为jshint的选项。单击此选项，然后滚动浏览您的js。您会在js行的开始处发现许多红点-清除js错误，如果仍然不起作用，请返回o us；@errad这些都只是关于重复var语句的样式警告。@barmar你说得对。这只是我在深入研究问题之前的第一次尝试；你在加载页面时设置所有选定的_XXX变量，而不是在用户从下拉列表中选择某个变量之后。在JSFIDLE中，你有一个名为jshint的选项。单击此按钮，然后滚动浏览您的js。您会在js行的开头找到许多红点-清除js错误，如果仍然不起作用，请返回给我们；@errad这些都只是关于重复var语句的样式警告。@barmar您说得对。这只是我深入研究该问题之前的第一次尝试；非常感谢您，我很高兴我刚刚学到了很多，非常感谢：非常感谢，我刚刚学到了很多，非常感谢：