Javascript и jQuery arrays undefined

Question

Я попытался настроить массив, но когда я использую console.log(array_name), он печатает номер счетчика (x) вместо того, чтобы печатать путь изображения. Неопределенный представляет себя, как только я попытался использовать console.log(img[x]), чтобы проверить, является ли содержимое переменной, это источник изображения. Но поскольку img тоже не работает, я не знаю, что происходит.

$(window).on('load', function(){ 
    var x = 0; 
    var img = []; 
     $(".gallery_img").each(function(img){ 
      var image = new Image(); 
      image.src = $(this).attr("src"); 
      x = x + 1; 
      img[x] = image.src; 
      console.log(img); 
      console.log($(this).attr("src")); 

Я довольно новыми для JQuery и JavaScript, так что я был бы очень благодарен за некоторые конкретные объяснения, а не просто решение. Я надеюсь, что я был достаточно конкретным, а не дубликат

Answer 1

попытка переименовать переменную массива var img = []; к чему-то вроде var imgs = [];

, потому что вы используете ту же переменную в функции здесь:

$(".gallery_img").each(function(img)..

Добавлено с комментария @ guest271314.

Причина, почему это печать графа вместо пути, потому что первый параметр в .each(index, element) является индексом элемента в коллекции элементов

Answer 2

Вы Инкрементирование своего массива, прежде чем у него есть шанс, чтобы добавить изображение в индекс 0.

$(window).on('load', function(){ 
var x = 0; 
var img = []; 
    $(".gallery_img").each(function(img){ 
     var image = new Image(); 
     image.src = $(this).attr("src"); 
     x = x + 1; //<- x becomes 1 
     img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began. 
     console.log(img); 
     console.log($(this).attr("src")); 

Попробуйте изменить свой код на это.

$(window).on('load', function(){ 
var x = 0; 
var img = []; 
    $(".gallery_img").each(function(img){ 
     var image = new Image(); 
     image.src = $(this).attr("src"); 
     img[x++] = image.src; //this will increment x after the value x is used. 
     console.log(img); 
     console.log($(this).attr("src")); 

Answer 3

Ну, в то время как вы думаете, передавая свой объявленный массив анонимной функции на самом деле вы определяя новую локальную переменную img с этим кодом:
.each(function(img){}), что только можно увидеть в этой новой анонимной функции
Поскольку эта функция обратного вызова, который должен иметь входные параметры, которые будут переданы по each() функции: jQuery.each(array, callback)

Теперь то, что вы сделали, вы определили ваш массив img в рамках функции:
$(window).on('load', function(){..});
А затем определить еще одну переменную в качестве входного параметра, который будет использоваться в этой области видимости функции:
$(".gallery_img").each(function(img){..});
Я думаю, вы пытался передать эту переменную в эту функцию, но это не является необходимым, так как вы уже объявили он находится в более широком диапазоне, и эта переменная уже доступна в области функций.
Truth about javascript variable scopes

Когда вы определили эту переменную в качестве параметра функции обратного вызова, вы получаете вашу новую локальную переменную img, которая получает индекс матча в качестве значения и ваш массив img становятся недоступны внутри этой функции.

Так что вы должны были сделать на самом деле:

$(window).on('load', function(){ 
    var x = 0; 
    var img = []; 
    $(".gallery_img").each(function(ind, val){ 
     var image = new Image(); 
     image.src = $(this).attr("src"); 
     // Unnecessary, we already have index - ind, unless you use some filtering. 
     // So you could get rid of x variable and use ind instead, like img[ind] = image.src 
     x = x + 1; //<- x becomes 1 
     img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began. 
     console.log(img); 
     console.log($(this).attr("src")); 

Кроме того, я советую вам, чтобы привыкнуть к jsfiddle для установки вашего образца кода, который поможет вам отлаживать код и нам, чтобы помочь с вашей фактической выборки ,