使用javascript對來自資料庫的回圈中的資料進行價格計算-有解無憂

我希望使用 Javascript 將來自我的資料庫的資料的價格顯示在螢屏上。我寫了這樣的代碼，但它只能以這種方式作業。我可能有不止一個來自資料庫的資料。例如，可能會出現多個標題而不是 gb 或 screen。我正在嘗試為此回圈，但我做不到。你能幫忙嗎？

const values = {
  gb: null,
  display: null,
}

function PriceCalculator(label, newPrice) {
  values[label] = newPrice;
  if(values.gb != null && values.display != null){
    var total = values.gb   values.display;
    var result =  Number(total).toLocaleString("pt-BR",{minimumFractionDigits: 2, maximumFractionDigits: 2});
    document.getElementById("money").innerHTML=result;
  }    
}

<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
  <h4>GB</h4>
  <div class="row mb-3" style="display: inline-block">
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-1"
             name="1"
             value="features-value-1"
             data-money="-300"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -300)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-2"
             name="1"
             value="features-value-2"
             data-money="-200"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -200)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-3"
             name="1"
             value="features-value-3"
             data-money="-50"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -50)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
      </div>
  </div>
  
  <h4>DISPLAY</h4>
  <div class="row mb-3" style="display: inline-block">
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-1"
             name="2"
             value="features-value-1"
             data-money="0"
             data-product-money="2500"
              onclick="PriceCalculator('display', 2500)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
      </div>
      <div class="col-sm-3 col-md-4 col-lg-3">
        <input class="inputs" type="radio"
             id="features-2"
             name="2"
             value="features-value-2"
             data-money="-1500"
             data-product-money="2500"
              onclick="PriceCalculator('display', 1500)"
        >
        <label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
      </div>
  </div>
</div>
</div>
<div style="position:absolute; right: 0px;">
<div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong> <div style="display: inline-block" id="money">Not calculated</div></div>
</div>
</div>
</div>

uj5u.com熱心網友回復：

就像上次一樣，委托 - 我使用 jQuery 是因為您之前的代碼使用了它。我也會加香草的

window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("form_step_1").addEventListener("input",() => {
    let sum = 0;
    document.querySelectorAll(".row h4").forEach(h4 => {
      let title = h4.textContent,
        container = h4.closest("div"), // parent
        chosen = container.querySelectorAll("[type=radio]:checked");
      if (chosen.length !== 0) {
        chosen.forEach(rad => {
          console.log(title,
            rad.value,
            Number(rad.dataset.productMoney),
            Number(rad.dataset.money))
          sum  = Number(rad.dataset.productMoney)   Number(rad.dataset.money)
        })
      }
      document.getElementById("money").textContent = sum.toFixed(2);
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
  <div class="container">
    <div class="row">
      <div class="talepler mb-3">
        <h4>GB</h4>
        <div class="row mb-3" style="display: inline-block">
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-1" name="1" value="features-value-1" data-money="-300" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
          </div>
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-2" name="1" value="features-value-2" data-money="-200" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
          </div>
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-3" name="1" value="features-value-3" data-money="-50" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
          </div>
        </div>
      </div>
      <div class="talepler mb-3">
        <h4>DISPLAY</h4>
        <div class="row mb-3" style="display: inline-block">
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-1" name="2" value="features-value-1" data-money="0" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
          </div>
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-2" name="2" value="features-value-2" data-money="-1500" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
          </div>
        </div>
      </div>
    </div>
    <div style="position:absolute; right: 0px;">
      <div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong>
        <div style="display: inline-block" id="money">Not calculated</div>
      </div>
    </div>
  </div>
</div>

jQuery

$(function() {
  $("#form_step_1").on("input", function() {
    let sum = 0;
    $(".row h4").each(function() {
      let title = $(this).text(),
        $container = $(this).closest("div"), // parent
        $chosen = $container.find("[type=radio]:checked");
      if ($chosen.length !== 0) {
        $chosen.each(function() {
          console.log(title,
            $(this).val(),
            Number($(this).data("productMoney")),
            Number($(this).data("money")))
          sum  = Number($(this).data("productMoney"))   Number($(this).data("money"))
        })
      }
      $("#money").text(sum.toFixed(2))
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
  <div class="container">
    <div class="row">
      <div class="talepler mb-3">
        <h4>GB</h4>
        <div class="row mb-3" style="display: inline-block">
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-1" name="1" value="features-value-1" data-money="-300" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
          </div>
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-2" name="1" value="features-value-2" data-money="-200" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
          </div>
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-3" name="1" value="features-value-3" data-money="-50" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
          </div>
        </div>
      </div>
      <div class="talepler mb-3">
        <h4>DISPLAY</h4>
        <div class="row mb-3" style="display: inline-block">
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-1" name="2" value="features-value-1" data-money="0" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
          </div>
          <div class="col-sm-3 col-md-4 col-lg-3">
            <input class="inputs" type="radio" id="features-2" name="2" value="features-value-2" data-money="-1500" data-product-money="2500">
            <label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
          </div>
        </div>
      </div>
    </div>
    <div style="position:absolute; right: 0px;">
      <div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong>
        <div style="display: inline-block" id="money">Not calculated</div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

如果您有這樣的物件（可以動態更改大小/鍵值）

const values = {
  gb: 100,
  display: 400,
  test: -1200,
  best: 500
}

然后可以像這樣動態計算所有值的總和：

const total = Object.values(values).reduce((x,y)=>x= y,0)

為了便于理解，可以這樣分解和console.logged

const numbers = Object.values(values);
console.log(numbers) // returns [100,400,-1200,500]
const total = numbers.reduce((x,y)=>x= y,0) // returns total = -200

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

標籤：javascript php 数据库前锋

上一篇：如何在Cheerio中獲取由不同HTML標簽分隔的文本

下一篇：如何在FlutterFirebase實時資料庫中存盤每個用戶的資料？