使用循环将 javascript 数组值注入多个 HTML 位置

Posted 2023-05-09

【中文标题】使用循环将 javascript 数组值注入多个 HTML 位置

【英文标题】：Inject javascript array values into multiple HTML locations using a loop

【发布时间】：2021-10-17 07:41:54

【问题描述】：

我希望能够用数字填充一个数组，并将该数组中的值一次注入到我的 html 代码中的 2 个位置。在这段代码中，我希望数组位置 1 [0] 中的值保存值 53498 并将其自身插入到下面的位置 value 和 <div class="n1">53498</div> 中。 我希望数组位置 2 [1] 中的值保存值 12500 并将其自身插入到下面的位置 value 和 <div class="n2">1250</div>... 等所有 10+ HTML 行那里。 目标类的命名约定将是 n1、n2、n3，因此循环上的迭代可以是 1、2、3... 我基本上希望能够在 1 个位置填充这些值，而不是滚动 HTML 到每次我想更新值时都找到值。 即使能够向每个提取数组值的位置添加一些代码也对我有用，例如value="53498" => value="*array output[0]*" 和 <div class="n1">53498</div> => <div class="n1">*array output[0]*</div>

谢谢

#row1
<div class="grid__item grid__item--3"><input type="checkbox" id="n1" value="53498" data-rel="div.n1" autocomplete="off"> Show Price</div>
<div class="grid__item grid__item--3"><div class="n1">53498</div></div>
#row2
<div class="grid__item grid__item--3"><input type="checkbox" id="n2" value="12500" data-rel="div.n1" autocomplete="off"> Show Price</div>
<div class="grid__item grid__item--3"><div class="n2">12500</div></div>
...
...
#row10 etc...

我认为下面的推导可以解决问题？

<div id="n1"></div>
<div id="n2"></div>

和

<script>
const nums = ["53498", "12500"];
let item = "";
for (let i = 0; i < nums.length; i++) 
  document.getElementById("n"+[i]).innerHTML = item;

</script>  

【参考方案1】：

这个概念似乎对我有用：

  <input type="checkbox" id="cn0" value="" data-rel="div.n1" autocomplete="off">
    <input type="checkbox" id="cn1" value="" data-rel="div.n1" autocomplete="off">
    <input type="checkbox" id="cn2" value="" data-rel="div.n1" autocomplete="off">
    <div id="n0"></div>
    <div id="n1"></div>
    <div id="n2"></div>

和js

    <script>
    const nums = [53498,12500];
    let item = "";
    for (let i = 0; i < nums.length; i++) 
      item = nums[i];
      citem = nums[i];
      document.getElementById("n"+ i).innerText = item;
      document.getElementById("cn"+ i).value = citem;
      alert("item="+item);
      alert("citem="+item);
    
    </script>