文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >用javascript计算来自数据库的循环中的数据

问用javascript计算来自数据库的循环中的数据
EN

Stack Overflow用户
提问于 2022-09-12 18:42:42
回答 2查看 57关注 0票数 0

我希望用Javascript在屏幕上显示来自我的数据库的数据的价格。我写了这样的代码，但它只能这样工作。我可能有来自数据库的多个数据。例如，可能出现多个标题，而不是gb或screen。我正试着找这个，但我做不到。你能帮忙吗？

​

代码语言：javascript
复制
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;
  }    
}
代码语言：javascript
复制
<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>

​

javascript
php
database
foreach
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-12 19:12:37

因此，like last time，委托-我使用jQuery，因为您以前的代码使用它。我也要加香草的

​

代码语言：javascript
复制
window.addEventListener("DOMContentLoaded", () => {
  const total = document.getElementById("money");
  document.getElementById("form_step_1").addEventListener("input", e => {
    let sum = +e.target.closest(".container").dataset.productPrice;
    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.discount))
          sum += Number(rad.dataset.discount)
        })
      }
      total.textContent = sum.toFixed(2);
    })
  })
})
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
  <div class="container" data-product-price="2500">
    <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-discount="-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-discount="-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-discount="-50">
            <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-discount="0">
            <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-discount="-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>

​

jQuery

​

代码语言：javascript
复制
$(function() {
  $("#form_step_1").on("input", function(e) {
    let sum = +$(e.target).closest("div.container").data("price");
    console.log(sum)
    $(".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("discount")));
          sum += Number($(this).data("discount"));
        })
      }
      $("#money").text(sum.toFixed(2))
    })
  })
})
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
  <div class="container" data-price="2500">
    <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-discount="-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-discount="-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-discount="-50">
            <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-discount="0">
            <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-discount="-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>

​

票数 0
EN

Stack Overflow用户

发布于 2022-09-12 19:05:54

如果您有这样一个对象(它可以动态地更改大小/键值)

代码语言：javascript
复制
const values = {
  gb: 100,
  display: 400,
  test: -1200,
  best: 500
}

然后，可以动态地计算所有值的总和，如下所示：

代码语言：javascript
复制
const total = Object.values(values).reduce((x,y)=>x=+y,0)

为了理解这一点，可以将其分解为console.logged，如下所示

代码语言：javascript
复制
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
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73693902

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档