在每个奇数/第二个循环上显示内部 HTML 输出的分数？

Posted 2023-05-07

【中文标题】在每个奇数/第二个循环上显示内部 HTML 输出的分数？

【英文标题】：Display fraction of innerHTML output on every odd/second loop?

【发布时间】：2020-10-29 00:08:38

【问题描述】：

对 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;
    
  );

【问题讨论】：

1.不用喊2.点击[<>]sn-p编辑器制作minimal reproducible example

【参考方案1】：

也许是这个？

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

【讨论】：

这工作完美，帮助很大，下次我会让代码可重现，不要大喊大叫哈哈，道歉..谢谢mplungjan

【参考方案2】：

使用模数 % 运算符来确定一个数字是奇数还是偶数 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;
    
);