<h2>中未顯示計算結果。jQuery/Javascript-有解無憂

我有一個正在作業的百分比計算器。但是結果只顯示在我的input. 它沒有顯示在我的h2. 我希望結果同時顯示在input和h2中。這可能嗎？

$(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
  let formContainer = $(this).closest('.section')
  var first = Number($(formContainer).find('.CalcFrom').val()); // = Topper Price
  var second = Number($(formContainer).find('.CalcTo').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $(formContainer).find('.CalcResult').val(Number(multiply).toFixed(2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="section">
  <p style="margin:5px 0 5px;color:blue;font-size:18px;">Topper to current</p>
  <input type="text" class="ChangeCalulator CalcFrom" value="1000">
  <input type="text" class="CalcTo ChangeCalulator" value="">
  <input type="text" class="CalcResult" value="">
  <h2 class="CalcResult"></h2>
</div>

uj5u.com熱心網友回復：

問題是因為您正在使用val()，并且只有input元素才有值。在h2使用text()方法中顯示輸出。

另外，我建議將選擇器分開，否則您的代碼將嘗試將 a 添加value到 theh2并將一個文本節點添加到input，這是無效的。

最后，使用input事件而不是你系結的多個事件，也不要雙重包裝你的 jQuery 物件，這是一種浪費。

$(document).on("input", ".ChangeCalulator", (e) => {
  let $formContainer = $(e.target).closest('.section')
  let first = Number($formContainer.find('.CalcFrom').val());
  let second = Number($formContainer.find('.CalcTo').val());
  let result = ((second - first) / first * 100).toFixed(2);
  
  $formContainer.find('input.CalcResult').val(result);
  $formContainer.find('h2.CalcResult').text(result);
});

.section p {
  margin: 5px 0 5px;
  color: blue;
  font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="section">
  <p>Topper to current</p>
  <input type="text" class="CalcFrom ChangeCalulator" value="1000">
  <input type="text" class="CalcTo ChangeCalulator" value="">
  <input type="text" class="CalcResult" value="">
  <h2 class="CalcResult"></h2>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503787.html

標籤：javascript jQuery 阿贾克斯 jQuery-ui

上一篇：組件缺少模板或渲染功能。在<應用程式>

下一篇：使用jQuery停止影片回圈