jQuery计算器无法在IE中工作。在其他浏览器中看起来很棒

时间:2014-04-11 14:39:39

标签: jquery jquery-ui internet-explorer jquery-ui-button

以为我已经完成了这个计算器。它看起来很棒,直到我在IE中查看它。你们可以看看,让我知道为什么它会搞砸了吗?在IE和其他浏览器中查看它以进行比较。只需向下滚动到“付款计算器”click here

即可

我正在使用jQuery UI Radio Buttons。因此,下面的许多样式都是为了对抗来自jQuery库的内容。

感谢您提前提供任何帮助。

<script>
              $(document).ready(function() {
                $( "#interest_rate, #amount, #payments" ).buttonset();
                $('#amount > input, #interest_rate > input, #payments > input').on("click", function() {
                  if ($("#interest_rate > input:checked").attr("id") == "weekly") {
                    var numOfPayments = 32;
        $('#pmt_freq').html('WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
                  } else if ($("#interest_rate > input:checked").attr("id") == "two_weeks") {
                    var numOfPayments = 15;
        $('#pmt_freq').html('BI-WEEKLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
                  } else if ($("#interest_rate > input:checked").attr("id") == "semi_monthly") {
                    var numOfPayments = 16;
        $('#pmt_freq').html('SEMI-MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
                  } else if ($("#interest_rate > input:checked").attr("id") == "monthly") {
                    var numOfPayments = 8;
        $('#pmt_freq').html('MONTHLY PAYMENT<sup>2</sup><div class="triangle-dwn">');
                  }
                  if ($('#payments > input:checked').val() == "bronze") {
                    $('#weekly').val(.0569);
                    $('#two_weeks').val(.1138);
                    $('#semi_monthly').val(.1233);
                    $('#monthly').val(.2467);
                  } else if ($('#payments > input:checked').val() == "silver") {
                    $('#weekly').val(.0531);
                    $('#two_weeks').val(.1062);
                    $('#semi_monthly').val(.1150);
                    $('#monthly').val(.23);
                  } else if ($('#payments > input:checked').val() == "gold") {
                    $('#weekly').val(.0492);
                    $('#two_weeks').val(.0985);
                    $('#semi_monthly').val(.1067);
                    $('#monthly').val(.2133);
                  } else if ($('#payments > input:checked').val() == "platinum") {
                    $('#weekly').val(.0454);
                    $('#two_weeks').val(.0908);
                    $('#semi_monthly').val(.0983);
                    $('#monthly').val(.1967);
                  } else {
                    $('#weekly').val(.0404);
                    $('#two_weeks').val(.0808);
                    $('#semi_monthly').val(.0875);
                    $('#monthly').val(.175);
                  }
                  var amount = ($('#amount > input:checked').val() );
                  var interest_rate = ($('#interest_rate > input:checked').val() );
                  var interest_rate_plus = +1 + +interest_rate;
                  var interRate_numOfPay = Math.pow(interest_rate_plus, numOfPayments);
                  var averagePayments = ( interest_rate * amount * interRate_numOfPay) / (interRate_numOfPay - 1 );
                  var totalPaid = averagePayments * numOfPayments;
                  var fees = totalPaid - amount;

                  $('#cash_advance').html("$" + amount);
                  $('#total_fees').html("$" + fees.toFixed(2));
                  $('#average_payments').html("$" + averagePayments.toFixed(2));
                  });
                });
</script>

这是html:

<div class="calculator-container">
  <h2>PAYMENT CALCULATOR</h2>
  <form>
    <div id="payments">
      <label class="calc-descs first"><span>1</span>MEMBERSHIP LEVEL</label>
      <input type="radio" id="bronze" name="radio" value="bronze" checked="checked"><label for="bronze">bronze</label>
      <input type="radio" id="silver" name="radio" value="silver"><label for="silver">silver</label>
      <input type="radio" id="gold" name="radio" value="gold"><label for="gold">gold</label>
      <input type="radio" id="platinum" name="radio" value="platinum"><label for="platinum">platinum</label>
      <input type="radio" id="premier" name="radio" value="premier"><label for="premier">premier</label>
    </div>
  </form>   
  <form>
    <div id="interest_rate">
      <label class="calc-descs second"><span>2</span>PAY FREQUENCY</label>
      <input type="radio" id="weekly" name="radio"><label for="weekly">weekly</label>
      <input type="radio" id="two_weeks" name="radio" checked="checked"><label for="two_weeks">every two weeks</label>
      <input type="radio" id="semi_monthly" name="radio"><label for="semi_monthly">twice a month</label>
      <input type="radio" id="monthly" name="radio"><label for="monthly">monthly</label>
    </div>
  </form>
  <form>
    <div id="amount">
      <label class="calc-descs third"><span>3</span>LOAN AMOUNT</label>
      <input type="radio" id="300" name="radio" value="300.00"><label for="300">$300</label>
      <input type="radio" id="500" name="radio" value="500.00"><label for="500">$500</label>
      <input type="radio" id="750" name="radio" value="750.00" checked="checked"><label for="750">$750</label>
      <input type="radio" id="1000" name="radio" value="1000.00"><label for="1000">$1000</label>
      <input type="radio" id="1200" name="radio" value="1200.00"><label for="1200">$1200</label>
    </div>
  </form>
  <div id="calc-filler"></div><div class="total-box">LOAN AMOUNT<div class="triangle-dwn"></div></div><div class="total-box">INTEREST + FEES <sup>1</sup><div class="triangle-dwn"></div></div><div id="pmt_freq" class="total-box">BI-WEEKLY PAYMENT <sup>2</sup><div class="triangle-dwn"></div></div><br />
  <div id="loan_totals"><label>ESTIMATED LOAN COST</label></div><div id="cash_advance">$750.00</div><div id="total_fees">$847.44</div><div id="average_payments">$106.50</div>
  <div class="calc-disclaimer">Calculator defaults loan life base on payment cycle chosen. <sup>1</sup> Calculation is an estimate, your loan cost may vary. <sup>2</sup> Payment may vary.</div>
</div>

CSS:

.calculator-container { color: #949599; width: 825px; margin: 0 auto; }
.calculator-container h2 { color: #949599; margin-bottom: 30px; }
.ui-buttonset .ui-button { margin: initial }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: initial; border: 2px solid #949599; border-radius: 6px; color: #949599; padding: 11px 22px; line-height: 44px; text-align: center; }
#payments label { padding: 11px 28px;}
#payments label:first-child { padding: 0; }
#amount label { padding: 11px 30px; }
#amount label:first-child { padding: 0; }
.ui-state-active, .ui-state-focus { background: #F15A2B; border: 2px solid #f15A2B; outline: none; color: #fff; }
#interest_rate, #amount, #payments { padding: 1px; margin-bottom: 25px; width: auto; }
#loan_totals { height: 46px; width: 220px; line-height: 46px; float: left; text-align: center; padding-right: 10px; clear: both; }
#cash_advance, #total_fees, #average_payments { background: #F15A2B; width: 150px; height: 46px; line-height: 46px; margin-right: 48px; margin-bottom: 25px; border-radius: 6px; color: #fff; text-align: center; font-size: 1.3em; display: block; float: left; border: 2px solid #fff; -moz-box-shadow: 0 0 0 6px #F15A2B; -webkit-box-shadow: 0 0 0 6px #F15A2B; box-shadow: 0 0 0 2px #F15A2B; }
#average_payments { margin-right: 0; }
#cash_advance { margin-left: 5px; }
#calc-filler { width: 220px; height: 30px; float: left; display: block; margin-right: 5px; }
.total-box { position: relative; width: 150px; height: 30px; line-height: 12px; margin-right: 48px; text-align: center; font-size: 12px; display: block; float: left; }
.calc-disclaimer { line-height: 11px; font-size: 11px; width: 100%; display: block; clear: both; padding-left: 100px; }
.ui-button-text-only .ui-button-text { padding: initial; }
.calculator-container form br  { display: none; }
.calc-descs { display: inline-block; width: 220px; padding: 0; }
.calc-descs span { -webkit-border-radius: 50%; -moz-border-radius; border-radius: 50%; padding: 6px 11px; margin-right: 10px; border: 1px solid #949599; }
.triangle-dwn { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #949599; position: absolute; left: 50%; bottom: 6px; margin-left: -3.5px; }    

1 个答案:

答案 0 :(得分:1)

目前没有任何版本的Internet Explorer支持&#34;初始&#34; CSS关键字(请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/initial

所以&#34;填充:初始&#34;在ui-button-text-only和ui-button-text上没有应用