Javascript jQuery-单选按钮-变量-OnClick

我在右边有一个数据表，从某些值开始，通过使用单选按钮和左边的滑块进行修改

我希望“全额付款”选项的第一个单选按钮将右侧的估计折扣增加6%。一旦估计折扣发生变化，我希望“新金额”和“估计节省”值也会发生变化，因为估计折扣直接影响所有这些值

---

在上一个jQuery段落中，我能够正确地更新百分比，但我想我在将“newPercent”声明为局部变量而不是全局变量时遇到了问题

我还做了一个JSFIDLE：

任何帮助都将不胜感激

HTML

---

您的代码目前最大的问题之一是难以阅读。您应该努力尽可能清晰地编写代码，以便在发生错误时您知道在哪里查找，并且可以更清楚地理解各个部分。将事物分解为单独的函数是将逻辑分解的最简单方法之一，因此它不那么精简，更易于重用

主要问题与数学有关。使用附加奖金，而不仅仅是一个固定的折扣率和适当调整百分比乘数，会使事情变得过于复杂。再加上奇怪的签名，这导致了疯狂的结果

让我们把它重构成更干净、更美观的东西。本例中有一种半高级JS技术，但其他所有技术都是基本的

JS:

HTML:

<div>
  <label>
    <input type="radio" name="payment" value="22" checked />
    Base
  </label>
  <label>
    <input type="radio" name="payment" value="28" />
    Full
  </label>

  <div>
    Original: $<span class="original"></span>
  </div>

  <div>
    Discount: <span class="percent"></span>%
  </div>

  <div>
    Savings: $<span class="savings"></span>
  </div>

  <div>
    Price: $<span class="amount"></span>
  </div>
</div>

但那没那么有趣！（也将我们的变量排除在寒冷、寒冷的全局范围内。）

paymentInfo

函数的实际返回值是一个包含适当属性的对象。您可以看到我们如何在

setInfo

函数中访问这些属性

扩展折扣现在只需添加新的单选按钮即可，折扣百分比位于

值

属性中

希望这对编写更易于维护的代码有帮助。如果您需要一些阅读材料，以下是一些关于相关主题的文章：

---

我能够在最后一段jQuery中正确更新百分比。。。但是我想我在声明“newPercent”为局部变量而不是全局变量时遇到了问题？请将问题的解释放在问题本身中，而不是注释中。为什么JSFIDLE中的代码看起来与问题中的代码一点也不像？嗨@Barmar。谢谢你引起我的注意。正确的链接是：。我找不到编辑按钮，因此我将正确地重新发布此问题。无需重新发布。编辑链接在问题标签下面，你的用户名在底部。非常有用！谢谢你抽出时间，@Oka。

// Bill starting amount
var originalAmount = 1850;

// The amount taken off the bill based upon the starting discount
var discountAmount = originalAmount *.22;

// The new bill amount: the original bill amount minus the previous savings
var newAmount = originalAmount - discountAmount;

// Discount starting point
var discountPercent = 22;

// To display numbers with decimals
var displayedDiscount = discountPercent;
var displayedOriginalAmount = originalAmount.toFixed(2);
var displayedDiscountAmount = discountAmount.toFixed(2);
var displayedNewAmount = newAmount.toFixed(2);


$(document).ready(function(){
    $("#option").hide();
    $("#hide").click(function(){
        $("#option").hide();
    });
    $("#show").click(function(){
        $("#option").show();
    });
    $("#estimated-discount-div").html(displayedDiscount);
    $("#new-amount-div").html(displayedNewAmount);
    $("#savings-amount-div").html(displayedDiscountAmount);
});


$(document).ready(function(){
    $("input[name='payment']").click(function() {
        add = this.value;
        var newPercent = (+discountPercent) + (+add);
        $("#estimated-discount-div").html(newPercent);
        var discount = originalAmount * newPercent;
        var updateAmount = originalAmount - discount;
        $("#new-amount-div").html(updateAmount);
    });
});

var paymentInfo = (function () {
  var original = 1850,
      basePercent = 22;

  return (function (percent) {
    percent = percent || basePercent;

    var discount = original * (percent / 100),
        current = original - discount;

    return {
      original: original,
      percent: percent,
      discount: discount,
      current: current
    };
  });
}());


function setInfo(info) {
  $('.original').text(info.original.toFixed(2));
  $('.percent').text(info.percent);
  $('.savings').text(info.discount.toFixed(2));
  $('.amount').text(info.current.toFixed(2));
}

$('input[name="payment"]').on('change', function () {
  var val = $(this).val(),
      info = paymentInfo(parseInt(val));

  setInfo(info);
});

setInfo(paymentInfo());

<div>
  <label>
    <input type="radio" name="payment" value="22" checked />
    Base
  </label>
  <label>
    <input type="radio" name="payment" value="28" />
    Full
  </label>

  <div>
    Original: $<span class="original"></span>
  </div>

  <div>
    Discount: <span class="percent"></span>%
  </div>

  <div>
    Savings: $<span class="savings"></span>
  </div>

  <div>
    Price: $<span class="amount"></span>
  </div>
</div>

var original = 1850,
    basePercent = 22;

var paymentInfo = function (percent) {
  percent = percent || basePercent;

  var discount = original * (percent / 100),
      current = original - discount;

  return {
    original: original,
    percent: percent,
    discount: discount,
    current: current
  };
};