javascript - JS中多个项目的运行函数

Question

我有一个函数负责更新某些 <div> 中的值，代码如下所示:

文件.js

window.onload = function makeRequest() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            calcPreco(xmlHttp.responseText);
    }
    xmlHttp.open("GET", "_config/buscar_valor.php?id="+document.getElementsByName("cloud")[0].getAttribute("cloudid")+"&periodicidade=monthly", true); // true para asynchronous 
    xmlHttp.send(null);
}

function calcPreco(preco) {
    console.log(preco);
    preco = preco.replace(",", ".");
    preco -= document.getElementsByName("cloud")[0].getAttribute("desconto");
    document.getElementsByClassName("mostrar_valor").textContent = preco;
}

index.php

<div name="cloud" cloudid="1" desconto="5"> 
<span class="mostrar_valor"></span> 
</div> 
<div name="cloud" cloudid="2" desconto="10"> 
<span class="mostrar_valor"></span> 
</div> 
<div name="cloud" cloudid="3" desconto="15"> 
<span class="mostrar_valor"></span> 
</div>

请注意，只有 cloudid和 desconto每个 <div> 中的属性都已更改, 余数保持不变。

脚本只会通过cloudid搜索“buscar_valor.php”中的值来进行计算。属性，即每个计划的ID。

desconto属性是将从帐户中扣除的金额。

问题是它只对第一个 <div> 这样做，我怎样才能让它适用于所有<div> ？

Answer 1

你必须遍历所有云元素:

  for(const cloud of Array.from(document.getElementsByName("cloud"))) {

然后为了从 API 中检索相关的 preco，我会使用新的 fetch 方法，因为它更容易处理:

   fetch("_config/buscar_valor.php?id=" + cloud.getAttribute("cloudid")+ "&periodicidade=monthly")
     .then(res => res.text())
     .then(preco => {

现在 desconto 可以应用于 preco:

       preco -= cloud.getAttribute("desconto");

要获取云中的 mostrar_valor，只需使用 querySelector:

       const valor = cloud.querySelector(".mostrar_valor");      

然后您可以更改该元素的 textContent。