Как добавить новое событие на каждый элемент цикла?

Question

[Ivan Korsakov]

Существует массив с n-количеством элементов:
var arr = ['a', 'b', 'c'];

Необходимо в один попап-блок (div) вывести по очереди каждый элемент массива, чтобы при закрытии первого, открывался второй и тд. На данный момент выводится только последний элемент, в каком направлении думать, чтобы исправить ошибку?

Всем спасибо за ответы!

var arrPop = ['a', 'b', 'c'];

function servicePopup(params) {

  function test (arg) {
    $('body').removeClass('popup_opened');
    $('body').removeAttr('style');
    $('.popup__item').css('display', 'none');
    $('.popup__item_js').find($('.popup__item__content')).html(arg);
    $('body').addClass('popup_opened');
    $('.popup__item_js').css('display', 'inline-block');
    $('.popup__item__close_js').on('click', function() {
       // код закрытия окна
    });
  }

  if (arrPop.length > 0) {
    for (i = 0; i < params.length; i++) {
      test(params[i]);
    }
  } else {
    console.log('empty');
  }
}

servicePopup(arrPop);

Comments

[OVK2015]

Так, зачем вы их всех сразу циклом прогоняете?
1. Проверили arrPop.length != 0
2. Отобразили 1-ый popup.
3. Выполнили arrPop.shift()
4. Ждете пока пользователь не дочитает/чего-то в popup нажмет
5. Возвращаетесь к п.1
И так по кругу

Answer 1

[S3Ga]

var arrPop = ['a', 'b', 'c'];

function servicePopup(params) {

  function test (arr,index) {
    if(!arr[index]) return;
    $('body').removeClass('popup_opened');
    $('body').removeAttr('style');
    $('.popup__item').css('display', 'none');
    $('.popup__item_js').find($('.popup__item__content')).html(arr[index]);
    $('body').addClass('popup_opened');
    $('.popup__item_js').css('display', 'inline-block');
    $('.popup__item__close_js').on('click', function() {
    	test(arr,index++);
       // код закрытия окна
    });
  }

  if (arrPop.length > 0) {
      test(params,0);
  } else {
    console.log('empty');
  }
}

servicePopup(arrPop);

Comments

[Ivan Korsakov]

Таким способом выводится только первый элемент.

[S3Ga]

Покажите весь код

Answer 2

[Mikhail Osher]

Читайте про делегирование событий.