Javascript 和 jQuery 数组未定义答案

【问题标题】：Javascript and jQuery arrays undefinedJavascript 和 jQuery 数组未定义
【发布时间】：2015-12-12 11:21:58
【问题描述】：

我尝试设置一个数组，但是当我使用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 还很陌生，所以我非常感谢您提供一些具体的解释，而不仅仅是解决方案。我希望我已经足够具体了，而不是重复

【问题讨论】：

当你记录“image”和“image.src”时你会得到什么......？我希望它是“未定义的”..？
@Nomesh DeSilva 对于我得到的图像：而不是图像.src："file:///X:/portfolio/lavori/ car_wip.png" 与 $(this).attr("src"); 相同当然
函数的其余部分在哪里？你错过了它的后半部分。

标签： javascript jquery arrays undefined

【解决方案1】：

尝试将您的数组变量 var img = []; 重命名为 var imgs = []; 之类的名称

因为您在这里的函数中使用了相同的变量：

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

添加自 @guest271314 的评论。

之所以打印计数而不是路径是因为.each(index, element) 中的第一个参数是元素集合中元素的索引

【讨论】：

好的，我只是尝试了你所说的（它工作正常），不知道它可能会发生冲突，但是我不能在这样的 jquery 函数中使用全局变量作为参数?或者只是处理起来很乱？（只是想知道）
您可以使用相同的名称，然后使用 window.varname 来解决您在该函数中使用全局 var 的问题。但为了安全起见，请使用不同的变量名称。 Access overridden global variable inside a function
@Zeus .each(index, element)中的第一个参数是元素集合中元素的索引

【解决方案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"));

【讨论】：

【解决方案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 设置您的示例代码，这将帮助您调试您的代码和我们帮助您的实际示例。

【讨论】：