Question

我有一个函数负责更新某些content://downloads/my_downloads/305中的值，代码看起来像这样：

file.js

<div>

index.php

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;
}

请注意，每个<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>属性（即每个计划的ID）在“ buscar_valor.php ”中搜索值来进行计算。

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

问题在于它仅针对第一个desconto执行此操作，如何使它适用于所有<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。

在JS中为多个项目运行功能

1 个答案: