Не могу зациклить массив;каждый пункт работает индивидуально

Question

Следующий фрагмент кода работает должным образом:

var slctr = "What's new";
var section = document.querySelector('[aria-label="'+slctr +'"]');
var sectionAs = section.querySelectorAll('a');
$(sectionAs).click(function(e){
    e.preventDefault();
    var t = $(e.target).text();
    var sectionTitle = section.getAttribute('aria-label');
    alert('Title: ' + sectionTitle+', text: ' + t);
    return false;
});

Если я пытаюсь применить это к каждому {{section}}, работа останавливается:

var sections = [
    "What's new",
    "What's newish",
    "What's not new at all"
    ];

for(var l = 0; l < sections.length; l++){
    var slctr = sections[i];
    var section = document.querySelector('[aria-label="'+slctr +'"]');
    var sectionAs = section.querySelectorAll('a');
    $(sectionAs).click(function(e){
        e.preventDefault();
        var t = $(e.target).text();
        var sectionTitle = section.getAttribute('aria-label');
        alert('Title: ' + sectionTitle + ', text: ' + t);
        return false;
    });
}

Почему это не такработать на петле?

Answer 1

Вам необходимо использовать замыкания или IIFE, когда вы устанавливаете некоторые обработчики событий, которые иногда бывают асинхронными.Вам просто нужно обновить ваш код, например:

var sections = [
  "What's new",
  "What's newish",
  "What's not new at all"
];

for (var i = 0; i < sections.length; i++) {
  (function (i) {
    var slctr = sections[i];
    var section = document.querySelector('[aria-label="' + slctr + '"]');
    var sectionAs = section.querySelectorAll('a');
    $(sectionAs).click(function(e) {
      e.preventDefault();
      var t = $(e.target).text();
      var sectionTitle = section.getAttribute('aria-label');
      alert('Title: ' + sectionTitle + ', text: ' + t);
      return false;
    });
  })(i);
}

И еще одна вещь - вы использовали i для индекса и l для цикла.

Answer 2

Вы используете l в качестве переменной цикла, но затем пытаетесь получить доступ к разделам [i] и i не определено

var slctr = sections[l];