在每个 odd/second 循环中显示 innerHTML 输出的一部分？

Question

对 Stack Overflow 很新，对 javascript 也足够新。
希望大家不要因为我的问题不清楚。

我有一个问题，我有一个 for 循环，它在每个循环中显示我的内容，这是我最初需要它显示的方式，它也是显示的完美格式。

我现在遇到一个问题，我希望我的 innerHTML 输出 'myArr[i]' 的一部分只显示在每个奇数循环上，而不是在偶数循环上，而其余部分仍然显示在每个循环上...

有什么建议吗？

var clicks = 0;
document.getElementById("arrowLink").innerHTML.value = clicks; // clickable arrow

document.getElementById("arrowLink").addEventListener("click", function()
  {
  if (clicks < 1)
    {
    for(var i=0; i < displayArr1.length; i++)
      {
      middleEndpoints.innerHTML +=
        "<div class='d-flex justify-content-center'>"+
          "<div class='p-2'>"+
              "<p>Abc</p>"+
          "</div>"+
        
// HOW DO I GET THE BELOW PART OF MY CODE TO ONLY DISPLAY ON EVERY ODD OR SECOND LOOP?
 
        "<div class='row'>"+
          "<div class='col-sm-1 align-self-center'>"+
            "<p style='margin-bottom: 0;'>" + myArr[i] + "</p>"+
          "</div>"+

//----------------------------------------------------------------------------

          "<div class='col-sm-10 align-self-center'>"+
            "<p class='midLine'>&#8645;</p>"+
          "</div>"+
        "</div>"; 
      }
      clicks += 1;
    }
  });

Answer 1

Use the modulus % operator to determine if a number if odd or even in JavaScript.

偶数就是能被2整除的数。因此，对给定的数进行%2运算，结果为0则为偶数，否则为奇数。

var clicks = 0;
document.getElementById("arrowLink").innerHTML.value = clicks; // clickable arrow
document.getElementById("arrowLink").addEventListener("click", function(){
    if (clicks < 1) {
        for(var i=0; i < displayArr1.length; i++) {
            middleEndpoints.innerHTML +=
                "<div class='d-flex justify-content-center'>"+
                    "<div class='p-2'>"+
                        "<p>Abc</p>"+
                    "</div>";
            if (i % 2 != 0) {
            middleEndpoints.innerHTML +=
                   "<div class='row'>"+
                        "<div class='col-sm-1 align-self-center'></div>"+
                        "<p style='margin-bottom: 0;'>" + myArr[i] + "</p>"+
                    "</div>";
            }
            middleEndpoints.innerHTML +=
                    "<div class='col-sm-10 align-self-center'>"+
                        "<p class='midLine'>&#8645;</p>"+
                    "</div>"+
                "</div>"; 
        }
        clicks += 1;
    }
});

Answer 2

也许是这个？

document.getElementById("arrowLink").addEventListener("click", function() {
  if (clicks >= 1) return
  clicks++;
  const html = [];
  displayArr1.forEach((item, i) => {
    html.push(`<div class='d-flex justify-content-center'>
        <div class='p-2'>
        <p>Abc</p>
        </div>`);
    if (i % 2) {
      html.push(`<div class='row'>
            <div class='col-sm-1 align-self-center'>
            <p style='margin-bottom: 0;'>${myArr[i]}</p>
            </div>`);
    }
    html.push(`<div class='col-sm-10 align-self-center'>
        <p class='midLine'>&#8645;</p>
        </div>
        </div>`)
  });
  middleEndpoints.innerHTML=html.join("");
  clicks += 1;
});

在每个 odd/second 循环中显示 innerHTML 输出的一部分？

Display fraction of innerHTML output on every odd/second loop?

javascript

arrays

for-loop

if-statement

innerhtml