無法使用jQuery訪問關聯數組中的對象

我正在嘗試創建和對象數組，以便我可以在jQuery的for循環中訪問它們，並且我知道這在Actionscript中有效，所以我試圖做的是將我的目前的知識jQuery將工作。無法使用jQuery訪問關聯數組中的對象

請看看這一點，並告訴我，爲什麼我不能訪問divToShow

謝謝你們

var homeImages = new Array(); 
homeImages[0] = { hoverImage: ".leftColImage1", divToShow: ".image1", rollOverImg: "img-family-over.jpg" }; 
homeImages[1] = { hoverImage: ".leftColImage2", divToShow: ".image2", rollOverImg: "img-students-over.jpg" }; 
homeImages[2] = { hoverImage: ".leftColImage3", divToShow: ".image3", rollOverImg: "img-pros-over.jpg" }; 
homeImages[3] = { hoverImage: ".leftColImage4", divToShow: ".image4", rollOverImg: "img-retired-over.jpg" }; 

var hoverImage; 
var activeDiv; 
var mainContent = ".mainContent"; 

for (k = 0; k < homeImages.length; k++) { 

    homeImages[k].id = k; 
    $(homeImages[k].hoverImage).mouseover(function() { 
    //alert("divToShow : " + homeImages[this.id].divToShow); 
     alert("this : " + this.id); 
     activeDiv = homeImages[k].divToShow; 
     $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + homeImages[k].rollOverImg); 
     $(mainContent).hide(); 
     $(homeImages[k].divToShow).slideDown("slow"); 
    }).mouseout(function() { 
     $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg"); 
     $(".image1").hide(); 
     $(mainContent).slideDown("slow"); 
    }); 
}

來源

2010-05-28 Sixfoot Studio

什麼'homeImages [K] .ID = k'的目的是什麼？ – Eric 2010-05-28 11:27:42

在Actionscript中，您可以將該ID添加到數組中，然後在函數內部可以調用「this.id」來引用該數組中的任何內容。這是一個範圍問題，我不知道它是否是在Javascript中的相同的東西。謝謝 – 2010-05-28 11:30:56

啊，我懷疑你在這裏遇到了關閉問題。你總是得到「.image4」嗎？ – Eric 2010-05-28 11:31:00

好吧，試試這個：

for (k = 0; k < homeImages.length; k++) { 
    (function(current) { 
     $(current.hoverImage).hover(function() { 
      activeDiv = current.divToShow; 
      $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + current.rollOverImg); 
      $(mainContent).hide(); 
      $(current.divToShow).slideDown("slow"); 
     }, 
     function() { 
      $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg"); 
      $(".image1").hide(); 
      $(mainContent).slideDown("slow"); 
     }); 
    })(homeImages[k]); 
}

或者：

function setUpHover(item) { 
    $(item.hoverImage).hover(function() { 
     activeDiv = item.divToShow; 
     $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + current.rollOverImg); 
     $(mainContent).hide(); 
     $(item.divToShow).slideDown("slow"); 
    }, 
    function() { 
     $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg"); 
     $(".image1").hide(); 
     $(mainContent).slideDown("slow"); 
    }); 
} 

for (k = 0; k < homeImages.length; k++) { 
    setUpHover(homeImages[k]); 
}

來源

2010-05-28 11:34:20 Eric

真棒，工作！謝謝埃裏克。對於jQuery來說還是一個新東西，所以它讓我有些驚訝。 :) – 2010-05-28 11:49:44

我認爲你使用Javascript來混淆jQuery。 jQuery只是一個javascript的函數庫：閉包是javascript的一個特性，而不是jQuery。 – Eric 2010-05-28 12:19:37

您是否？對不起，我更新答案時沒有注意到。上半場肯定是在任何其他答案之前發佈的。如果下半場與你的類似，我很抱歉，但我真誠地從我的第一個解決方案中得到它。 – Eric 2010-05-28 13:26:21

//alert("divToShow : " + homeImages[this.id].divToShow);

在這種情況下，this指當前HTML元素，不當前homeImages元素。

來源

2010-05-28 11:29:33 Eric

原因是有關閉包的老經典：在mouseover處理程序中，k始終設置爲它的最後一個值爲4，而不是在創建mouseover處理程序時的值，這正是您的代碼所期望的值。

您可以通過在函數創建鼠標懸停處理程序解決此問題：

function addMouseEventHandlers(imageIndex) { 
    var homeImage = homeImages[imageIndex]; 
    homeImage.id = imageIndex; 
    $(homeImage.hoverImage).mouseover(function() { 
    //alert("divToShow : " + homeImages[this.id].divToShow); 
     alert("this : " + this.id); 
     activeDiv = homeImage.divToShow; 
     $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + homeImage.rollOverImg); 
     $(mainContent).hide(); 
     $(homeImage.divToShow).slideDown("slow"); 
    }).mouseout(function() { 
     $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg"); 
     $(".image1").hide(); 
     $(mainContent).slideDown("slow"); 
    }); 
} 

for (k = 0; k < homeImages.length; k++) { 
    addMouseEventHandlers(k); 
}

來源

2010-05-28 11:31:37

您從鼠標懸停處理函數內訪問變量k。但是在調用函數時，k的值已經更改，現在等於homeImages.length，因爲for循環已經運行完畢。要解決這個

一種方法是使用$.each代替for循環：

$.each(homeImages, function(k, element) { 
    element.id = k; 
    $(element.hoverImage).mouseOver(function() { 
     .... //you can use the value of k or element here 
    }); 
});

這工作，因爲傳遞給$.each的函數創建一個新的閉包，它可以記住的k每個迭代的值。

來源

2010-05-28 11:33:15 interjay

無法使用jQuery訪問關聯數組中的對象

回答

相關問題