Как определить, какой элемент был нажат, используя оператор for и массив

Question

У меня есть 8 ящиков, которые пользователь может выбрать, если он выберет ящик 1 - он должен предупредить, что ящик 1 был выбран.То же самое относится ко всем 8 коробкам.Прямо сейчас я запускаю цикл for с интервалом 1/10 секунды, который должен проверить, в каком поле нажата кнопка, а затем вывести предупреждение на основе оператора switch.

Когда вы запускаете код, он предупреждает, что поле 8 всегда выбрано, и я не могу понять, как выбрать поле

• .в документе HTML с идентификатором, указанным в массиве

РЕДАКТИРОВАТЬ: clearInterval (интервал);работает в своей текущей позиции, но при каждом клике выдает ошибку

«Uncaught 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);
}
}

Функция оператора переключения, «какой ящик»

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

Факт: «BOX 8 SELECTED»
Ожидается:Правильная коробка

Answer 1

Вам нужно изменить цикл, чтобы i не был глобальным:

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