如何使用 for 语句和数组确定单击了哪个元素答案

【问题标题】：How to determine which element has been clicked using a for statement and array如何使用 for 语句和数组确定单击了哪个元素
【发布时间】：2019-11-17 00:45:22
【问题描述】：

我有 8 个框可供用户选择，如果他们选择框 1 - 它应该提醒框 1 已被选中。这同样适用于所有 8 个盒子。现在，我正在以 1/10 秒的间隔运行一个 for 循环，它应该检查哪个框被单击，然后根据 switch 语句输出警报。

运行代码时，提示框 8 一直被选中，我不知道如何选择框

这些框是在 HTML 文档中设置的空 div，其 id 在数组中引用

编辑：clearInterval(interval);在当前位置工作，但每次点击都会输出错误

“未捕获的 ReferenceError：未定义间隔”

^ 有什么想法吗？

页面加载：

$(function() { //On page load
    var interval = setInterval(buttonClick, 100);
});

按钮点击功能

function buttonClick() {

    //INITIALIZING ARRAY
    var displayBox = [$("#boxOne-line-one"), $("#boxTwo-line-one"), $("#boxThree-line-one"), $("#boxFour-line-one"), $("#boxFive-line-one"), $("#boxSix-line-one"), $("#boxSeven-line-one"), $("#boxEight-line-one")];
    var slidePos = 0;

    for (let i = 0; i <= 7; i++) {
  (ii => {
    displayBox[ii].click(function() {
      slidePos = ii;
      console.log(slidePos);
      wbox(slidePos);
      clearInterval(interval);
    });
  })(i);
}
}

switch语句函数，“哪个盒子”

function wbox(slidePos) {
        switch(slidePos) {
        case 0:
        alert("BOX 1 SELECTED");
        break;

            case 1:
        alert("BOX 2 SELECTED");
        break;

        case 2:
        alert("BOX 3 SELECTED");
        break;

        case 3:
        alert("BOX 4 SELECTED");
        break;

        case 4:
        alert("BOX 5 SELECTED");
        break;

        case 5:
        alert("BOX 6 SELECTED");
        break;

        case 6:
        alert("BOX 7 SELECTED");
        break;

        case 7:
        alert("BOX 8 SELECTED");
        break;
    }
}

实际：“选择框 8”
预期：正确的框

【问题讨论】：

标签： javascript jquery arrays loops

【解决方案1】：

您需要更改循环以避免 i 成为全局变量：

for (let i = 0; i < 7; i++) {
  (ii => {
    displayBox[ii].click(function() {
      slidePos = ii;
      console.log(slidePos);
      wbox(slidePos);
      clearInterval(interval);
    });
  })(i);
}

【讨论】：