Javascript和jQuery数组未定义

Question

我尝试设置一个数组，但是当我使用console.log(array_name) ，它会打印计数器（x）的编号，而不是打印图像的路径。 一旦我尝试使用console.log(img[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){..});
我猜您正在尝试将此变量传递给此函数，但这不是必需的，因为您已经在更广泛的范围内声明了该变量，并且该变量已经在函数范围内可用。
关于javascript变量范围的真相

当您将此变量定义为回调函数参数时，您将获取新的局部变量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来设置示例代码，这将帮助您调试代码，而我们将为您提供实际示例。