如何將此代碼塊轉換為 Javascript 循環？

Question

這個函數運行完美，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();
    }
}

......超出我的能力范圍，我認為是專家的一個，明確的幫助或只是在正確方向上的一點將不勝感激。

Answer 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();
        }
    }
}

Answer 2

這是一個帶有簡單循環解決方案的小片段：

 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>

Answer 3

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在你的例子中不起作用，你必須確保你的循環在你想要處理的地方......

Answer 4

好的，非常感謝專家的快速反應，有點猶豫——這里是完美的工作（不要問我如何:)，努力縮進一點：

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

再次感謝各位！！！

Answer 5

您只需要將for 循環放入要重復的代碼中。

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