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來設置示例代碼，這將幫助您調試代碼，而我們將為您提供實際示例。