將所選單選按鈕的值添加到用戶輸入總和

我創建了一個基本計算器，它將用戶輸入的數字增加 24%。

我試圖在第二步中添加用戶選擇一個單選按鈕，這也被添加到生成的總數中。我已經開始撰寫一個 on change 事件，但我不確定這是不是最好的方法。

$(document).ready(function() {

  var biddingFee;
  var $lotValue = $("#lotValue"),
    $bid = $("#totalBid"),

    $buyersPremium = $("#buyersPremium"),
    $liveBiddingFee = $("#liveBiddingFee")


  $('input[type=radio][name=group1]').change(function() {
    if (this.value == '0') {
      biddingFee = 0;
    } else if (this.value == '3') {
      biddingFee = 3;
    } else if (this.value == '5') {
      biddingFee = 5;
    } else if (this.value == '6') {
      biddingFee = 6;
    }
  });

  $lotValue.keyup(function(e) {
    if (e.which == 13) {
      return;
    }

    var lotValue = parseFloat($lotValue.val()),
      bid = lotValue * 0.24;

    if (isNaN(bid) || isNaN(lotValue)) {
      $bid.hide();
      return;
    }

    var bidValue = lotValue   bid;

    $('.line').hide();

    $buyersPremium.fadeIn().find(".buyersPremiumNumber").text((bid).toFixed(2));

    $bid.fadeIn().find(".totalBidNumber").text((bidValue).toFixed(2));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>1. Enter your bid: <input name="lotValue" id="lotValue" type="number" class="form-control" /></p>

<p id="buyersPremium">The Buyers Premium (inc VAT) is ￡<span class="buyersPremiumNumber"></span></p>

<br>

<div class="biddingMethods">
  <p>2. Choose a live bidding method.</p>
  <label><input type="radio" name="group1" value="0" checked>Type 1 (￡0)</label>
  <label><input type="radio" name="group1" value="3">Type 2 (￡3)</label>
  <label><input type="radio" name="group1" value="5">Type 3 (￡5)</label>
  <label><input type="radio" name="group1" value="6">Type 4 (￡6)</label>

  <p id="liveBiddingFee">The Live Bidding Fee is ￡<span id="price"></span></p>
</div>

<br>

<p id="totalBid">Total ￡<span class="totalBidNumber"></span></p>

作業 jsfiddle： https ://jsfiddle.net/devful_rs14/wa7xcns4/2/

uj5u.com熱心網友回復：

為了滿足您的要求，最簡單、最準確、最可維護和最可擴展的方法是使用一個函式，當計算中涉及的任何 DOM 元素更新時，該函式從 DOM 中檢索所有必需的值。這避免了對丑陋的全域變數的需求，并將邏輯包含在一個地方。

除了上述之外，請注意您應該使用input事件來偵聽文本框的更改，而不是 keyup，因為前者也會在使用滑鼠粘貼內容時觸發。此外，您可以將通用class屬性應用于無線電輸入，以使選擇它們更加簡潔。

最后，請注意在顯示貨幣值時使用toLocaleString()而不是。.toFixed(2)這將避免舍入錯誤，并將數值格式化為區域貨幣字串。如有必要，它還允許您輕松地根據用戶所在區域定制 UI。不過，我只是將它硬編碼en-GB為這個例子，以遵循問題中的例子。

綜上所述，這是一個作業示例：

jQuery($ => {
  let biddingFee;
  let buyersPremiumFactor = 0.24;
  let locale = 'en-GB'
  let currencyLocaleSettings = { style: 'currency', currency: 'GBP' };

  let $lotValue = $("#lotValue");
  let $buyersPremium = $("#buyersPremium");
  let $bid = $("#totalBid");
  let $biddingMethods = $('.biddingMethod');
  let $liveBiddingFee = $("#liveBiddingFee");
    
  let calculateBidTotal = () => {
    let bidValue = parseFloat($lotValue.val()) || 0; // coerce value to zero if non-numeric
    let buyersPremiumValue = bidValue * buyersPremiumFactor; 
    let biddingMethodValue = parseInt($biddingMethods.filter(':checked').val(), 10);
    let totalBidCost = bidValue   buyersPremiumValue   biddingMethodValue;

    $buyersPremium.fadeIn().find(".buyersPremiumNumber").text(buyersPremiumValue.toLocaleString(locale, currencyLocaleSettings));
    $liveBiddingFee.fadeIn().find("#price").text(biddingMethodValue.toLocaleString(locale, currencyLocaleSettings));
    $bid.fadeIn().find(".totalBidNumber").text(totalBidCost.toLocaleString(locale, currencyLocaleSettings));
  }

  $biddingMethods.on('change', calculateBidTotal)
  $lotValue.on('input', calculateBidTotal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>
  1. Enter your bid: 
  <input name="lotValue" id="lotValue" type="number" class="form-control" />
</p>
<p id="buyersPremium">
  The Buyers Premium (inc VAT) is <span class="buyersPremiumNumber"></span>
</p>
<br />

<div class="biddingMethods">
  <p>2. Choose a live bidding method.</p>
  <label><input type="radio" class="biddingMethod" name="group1" value="0" checked>Type 1 (￡0)</label>
  <label><input type="radio" class="biddingMethod" name="group1" value="3">Type 2 (￡3)</label>
  <label><input type="radio" class="biddingMethod" name="group1" value="5">Type 3 (￡5)</label>
  <label><input type="radio" class="biddingMethod" name="group1" value="6">Type 4 (￡6)</label>
  <p id="liveBiddingFee">The Live Bidding Fee is <span id="price"></span></p>
</div>
<br>

<p id="totalBid">
  Total <span class="totalBidNumber"></span>
</p>

標籤：jQuery 功能 计算器 改变

上一篇：Bootstrapcss在加載和頁面切換時可見

下一篇：為什么頁面重新加載后按鈕禁用不起作用？