Невозможно получить доступ к объектам в ассоциативных массивах, используя jQuery

Question

Я пытаюсь создать и массив объектов, чтобы я мог получить к ним доступ в цикле for в jQuery, и я знаю, что это работает в ActionScript, поэтому я пытаюсь преобразовать мои текущие знания в 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");
    });
}

Answer 1

Хорошо, попробуйте это:

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]);
}

Answer 2

Причина заключается в старой классике, относящейся к замыканиям: в обработчике при наведении курсора мыши k всегда устанавливается в свое последнее значение 4, а не в значение, которое было при создании обработчика при наведении курсора, что и ожидает ваш код.

Вы можете исправить это, создав обработчик наведения мыши в функции:

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);
}

Answer 3

Вы получаете доступ к переменной 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 для каждой итерации.

Answer 4

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

В этом контексте this относится к текущему элементу HTML, не к текущему элементу homeImages.