Question

我右边的数据表以某些值开头，并通过使用左侧的单选按钮和滑块进行修改。

我希望第一个单选按钮用于＆＃34;全额支付＆＃34;选项将右边的估计折扣增加6％。一旦估计的折扣发生变化，我希望＆＃34;新的金额＆＃34;和＆＃34;估计的节省＆＃34;由于估计的折扣直接影响所有价值，因此价值也会发生变化。

我能够在上一个jQuery段落中正确更新百分比，但我认为我在宣布＆＃34; newPercent＆＃34;作为局部变量而不是全局变量？

我还制作了一个JSFiddle：https://jsfiddle.net/4K2R7/43/

非常感谢任何帮助！

HTML

<label><input type="radio" name="payment" value="6" id="hide" id="hide-2"> Pay the full amount*</label>
<p>
<label><input type="radio" name="payment" value="0" id="show"> Payment plan</label>

使用Javascript / jQuery的

// 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);
    });
});

enter image description here

Answer 1

现在您的代码最大的问题之一就是难以阅读。您应该努力尽可能清晰地编写代码，以便在发生错误时知道要查找的位置，并且您可以更清楚地理解这些部分。将事情分解为单独的函数是分解逻辑的最简单方法之一，因此它不那么简洁，更可重用。

主要问题是数学相关。您通过使用附加奖金而不仅仅是平坦的折扣率并对百分比乘数进行适当调整来解决问题。加上奇怪的签名，这会导致狂野的结果。

让我们将它重构为更清洁，更容易的眼睛。在这个例子中有一个半高级JS技术，但其他一切都是基本的。

DEMO

JS：

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());

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>

在此示例中，我们使用单选按钮中的平面值，而不是尝试在现有按钮上添加额外折扣。

所以现在问一下，函数返回函数的原因是什么？那是IIFE。这种模式允许我们封装一些不需要改变的变量，并且不需要超出函数的范围。我们立即调用该函数，创建这些变量，并返回一个现在可以访问这些变量的函数。

如果没有IIFE，我们会像这样写

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
  };
};

但那不那么有趣！（还将我们的变量留在寒冷，寒冷的全球范围内。）

paymentInfo函数的实际返回值是包含适当属性的对象。您可以在setInfo函数中看到我们如何访问这些属性。

扩展您的折扣现在就像添加新的单选按钮一样简单，折扣百分比在value属性中。

希望这有助于编写更易于维护的代码。如果您需要一些阅读材料，这里有一些关于所涉及主题的文章：

jQuery - 单选按钮 - 变量 - OnClick

1 个答案: