如何将此代码块转换为 Javascript 循环?

时间:2021-07-06 09:24:53

标签: javascript loops

这个函数完美运行,onclick 它从 7 个 ‘cosT’ div 和 1 个 ‘cosT1’ div 中减去一个价格金额,就像从购物车中删除一个项目。

function changePrice0000() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var x = document.querySelectorAll(".cosT, .cosT1");
            x[0].innerHTML = parseFloat(Number(x[0].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            x[1].innerHTML = parseFloat(Number(x[1].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            x[2].innerHTML = parseFloat(Number(x[2].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            x[3].innerHTML = parseFloat(Number(x[3].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            x[4].innerHTML = parseFloat(Number(x[4].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            x[5].innerHTML = parseFloat(Number(x[5].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            x[6].innerHTML = parseFloat(Number(x[6].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            x[7].innerHTML = parseFloat(Number(x[7].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
        }
    };

    xhttp.open("GET", "text/p0000.txt", true);
    xhttp.send();
}

我尝试了以下几种变体,nooby 尝试循环并使其工作,但甚至没有远程成功......

function changePrice0000() {
    for(i=0; i<7; i++) {
        var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {

        var x = document.querySelectorAll(".cosT, .cosT1");

        x[n].innerHTML = parseFloat(Number(x[n].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
        x[0].innerHTML = parseFloat(Number(x[0].innerHTML) - Number(x[7].innerHTML)).toFixed(2);}};

        xhttp.open("GET", "text/p0000.txt", true);
        xhttp.send();
    }
}

...远远超出我的能力范围,我认为对于专家来说,明确的帮助或只是在正确方向上的一点将不胜感激。

5 个答案:

答案 0 :(得分:1)

您已经接近了,您只需要围绕要重复的代码部分进行 for 循环。您还在循环中使用了未定义的变量 n 而不是 i,正如评论中提到的@Rup:

function changePrice0000() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

            var x = document.querySelectorAll(".cosT, .cosT1");

            for(i = 0; i<7; i++) {
                x[i].innerHTML = parseFloat(Number(x[i].innerHTML) - Number(x[7].innerHTML)).toFixed(2);
            }

            xhttp.open("GET", "text/p0000.txt", true);
            xhttp.send();
        }
    }
}

答案 1 :(得分:0)

这是一个带有简单循环解决方案的小片段:

var x = document.querySelectorAll(".cost");

x.forEach(function(el) {
  el.innerHTML = parseFloat(Number(el.innerHTML) - Number(x[7].innerHTML)).toFixed(2);
  });
<div class="cost">1</div>
<div class="cost">2</div>
<div class="cost">3</div>
<div class="cost">4</div>
<div class="cost">5</div>
<div class="cost">6</div>
<div class="cost">7</div>
<div class="cost">8</div>

答案 2 :(得分:0)

function changePrice0000() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var x = document.querySelectorAll(".cosT, .cosT1");
      // loop over n starts here
      for (n = 0; n < 7; n++) {
        x[n].innerHTML = parseFloat(
          Number(x[n].innerHTML) - Number(x[7].innerHTML)
        ).toFixed(2);
      }
      // loop ends here
    }
    xhttp.open("GET", "text/p0000.txt", true);
    xhttp.send();
  };
}

也许这就是你的意思? N 是 var,因此您示例中的 I 将不起作用,您必须确保您的循环在您想要处理的位置之内...

答案 3 :(得分:0)

好的,非常感谢专家的快速回复,有点犹豫——这就是完美的工作(不要问我如何:),努力缩进一点:

function changePrice0000() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

    var x = document.querySelectorAll(".cosT, .cosT1");

        // loop begins
        for(n=0; n<7; n++) { 

        x[n].innerHTML = parseFloat(Number(x[n].innerHTML) - Number(x[7].innerHTML)).toFixed(2)};
        // loop ends

        x[n].innerHTML = parseFloat(Number(x[n].innerHTML) - Number(x[7].innerHTML)).toFixed(2);}};

xhttp.open("GET", "text/p0000.txt", true);
xhttp.send();}

再次感谢各位!!!

答案 4 :(得分:-1)

您只需将 for loop 放在要重复的代码中。

var n=7
    for(i = 0; i <= n; i++) {
            x[i].innerHTML = parseFloat(Number(x[i].innerHTML)-(Number(x[n].innerHTML)).toFixed(2);
        }