javascript - 如何仅用来自多个嵌套数组的特定索引的唯一值替换 div 中的文本

Question

我正在研究一个循环遍历数组(带数组)的函数，然后用嵌套数组的索引 1 的值替换几个 div 上的文本。
但只有在这些条件下:

嵌套数组需要在索引 0 上具有特定(字符串)值(即“类别 1”)

它应该只给出嵌套数组 的索引 1 的值如果索引 1 的值是唯一值 (我的意思是，如果在索引 1 内有其他具有相同值的嵌套数组，则它不是唯一的。我并不是说在嵌套数组本身内是唯一的)。

函数 get 由事件处理程序激活(单击“类别 1”，参见 codepen)。
单击类别 1 时，以下值: themaA1 themaA2 themaA3 themaA4 themaA5 themaA6 (不同 div 中的每个值)应该在绿色容器的 div 内可见(参见 codepen)。
不幸的是，我无法让它工作。
起作用的是循环并将数据放入索引 0 上具有相同值的不同 div 中。请参见下面的代码。

function displayThemes() {
  let theme = "i";
  for (let i = 0; i < forms.length; i++) {
    theme = forms[i][1];

    if (forms[i][0] === "Categorie 1")
      document.getElementById("theme" + i).innerHTML = theme;
  }
}

不起作用的是在 div 中获取正确的数据(只有唯一值)。
我走了这么远(见下面的代码)，但不幸的是它不起作用。

  function displayThemes() {
  let theme = "i";
  for (let i = 0; i < forms.length; i++) {
    theme = forms[i][1];

    if (forms[i][0] === "Categorie 1" && forms[i][1] !== theme)
      document.getElementById("theme" + i).innerHTML = theme;
  }
}

这是带有接口(interface)的完整代码: https://codepen.io/cheizer66/pen/pobXBmy
我不确定为什么它不起作用。我究竟做错了什么？你应该怎么做？什么能让它发挥作用？
我希望我把问题说清楚了，期待你的回应!
此致，
好的
ps:是的，我是 javascript 和编程新手🙃

Answer 1

你有两个问题。
第一:你分配了forms[i][1]至theme多变的。然后在 if 中的第二个条件中声明，你检查了它是否是 不是 等于 theme ，这当然是错误的。所以代码从未进入if堵塞。
我通过将其分配给先前的表单元素来解决它(如果先前的元素不存在，则“检查”)。
第二:当您尝试使用 ("theme" + i) 捕获 ID 为“theme1”的元素时表达式，i值实际上是 11 而不是 1，因为 if用相同的索引 1 值阻止了前 10 个元素。所以它找不到 ID 为 theme11 的 HTML 元素.
我通过添加 counter 解决了它每次输入时代码加一的变量是if堵塞;

let counter = -1;
function displayThemes() {
  for (let i = 0; i < forms.length; i++) {
    let theme = i === 0 ? 'check' : forms[i - 1][1];

    if (forms[i][0] === "Categorie 1" && forms[i][1] !== theme) {
      counter++;
      document.getElementById("theme" + counter).innerHTML = forms[i][1];
    }
  }
}