JavaScript 中的 For 循环无法正常工作答案

【问题标题】：For Loop in JavaScript is not working correctlyJavaScript 中的 For 循环无法正常工作
【发布时间】：2021-09-26 15:02:36
【问题描述】：

const box = document.querySelectorAll(".box");
console.log(box.length);

const direction = [
  "top-start",
  "bottom-start",
  "left-start",
  "right-start",
  "top-center",
  "bottom-center",
  "left-center",
  "right-center",
  "top-end",
  "bottom-end",
  "left-end",
  "right-end"
];

box.forEach((el, index) => {
  for (let i = 0; i < direction.length; i++) {
    CreateTooltip(el, direction[index], "Hello, World!");
  }
});

上面提到的代码在DOM 中渲染144 工具提示，我只想要12 个，每个应该有不同的方向。我不知道为什么这个循环不起作用！我尝试在for 循环中添加forEach 循环，但问题仍然相同。

注意正如你们中的一些人所问的那样，我粘贴了我的整个代码。希望它会帮助你，然后你会帮助我。 ????

【问题讨论】：

嗯，您正在为每个调用创建并附加一个新的 DIV 元素，您希望得到什么？它将是 144，因为您有 12 个 .box 元素和 12 个方向。
@Pezhvak 我该如何解决这个问题？我不是 JavaScript 专家！
box.forEach((element, index) => { CreateTooltip(element, direction[index], 'Hello, World!'); }) 使用此代码创建工具提示
@Flames 非常感谢！！有效。如果您想要任何项目的工具提示，请记住我！

标签： javascript arrays for-loop iteration

【解决方案1】：

如果你使用 Queryselectorall ，如果是 class 使用 dot ，或者如果你使用 id 使用 #

const box = document.querySelectorAll('.box');

【讨论】：

这与命名错误无关，我在渲染时遇到问题！

【解决方案2】：

可以这样传入每个元素的索引，从方向数组中获取对应的值

box.forEach((element, index) => {  
        CreateTooltip(element, direction[index], 'Hello, World!');
})

【讨论】：

您的代码部分工作，但我仍然在 DOM 中呈现 144 个元素！我只想要 12 个。
我认为问题可能出在 CreateTooltip 函数上，你能分享它的代码吗？
假设box 的长度等于direction 的长度，这看起来是一个完全有效的解决方案。似乎该错误可能在您的 CreateTooltip 函数中。

【解决方案3】：

根据您所说，即想要 12 个工具提示（与 direction 索引计数相同）但获得 144 个工具提示（144/12 = 12），您的页面中应该有 12 个带有 .box 类的元素。问题出在您的查询选择中。

const box = document.querySelectorAll('.box');
console.log(box.length); // this should show 12

您需要做的是为您的元素设置一个 ID 或为框（此时为数组）创建一个循环，并分别为它们中的每一个执行您的 CreateTooltip 逻辑。

注意：我建议您在测试环境中测试您的CreateTooltip（为测试您的代码而创建的单独文件），其中只有一个.box 元素，您可能使用的库using 不支持对单个元素多次调用 CreateTooltip，这可能是您获得 144 个元素而不是 12 个元素的原因。

【讨论】：

我想我应该提到我的整个代码！让我做的真快。那么请告诉我实际的问题是什么！

【解决方案4】：

您的代码运行良好，因为您正在迭代框列表并且在其中您有另一个迭代，因此您的代码结果将始终是（框数）*（方向数）= 144..

因此，您可以通过以下给出的索引号操作一个和其他列表来仅在框或方向上进行迭代..

    $(box).each(function(i,v){console.log(direction[i])})

【讨论】：

谢谢，但我不使用 jQuery。不过真的很感激。 ??