Мне нужна помощь с контекстом $ (this) в jQuery

Question

Мне нужна помощь в этом блоке кода:

options.imgs.click(function() {
            var allImgs = $("#big img");
            $("#big img").each(function(n) {
                this.index = n;
            })
            animateImage(allImgs);
        })

    };

    function animateImage(images) {
        for(var i = 0; i < images.length; i++) {
            if (images[i].index == 0) {
                alert($(this).index)
            }
        }
    }

Моя проблема:

$(this).effect('scale', { percent: 200 }, 1000)

не работает. Я хочу, чтобы это утверждение ссылалось на изображение с индексом 0 и масштабировало его до 200%. Но $(this) вовсе не относится к первому изображению.

Answer 1

Как только вы вызываете свою функцию, ваша переменная " this " изменяется:

function test() {
  alert(this); // this will be the window object
}
$('p b').click(function() {
   alert(this); // this will be the bold element object
   test();
});

Например, запустив это на этой странице (используя firebug), я могу щелкнуть «просил» и «просмотрел» элементы справа вверху (они выделены жирным шрифтом) ... предупреждение от тестовой функции, где this - объект окна, not жирный элемент, как в обработчике событий.

Чтобы это исправить, просто передайте объект, над которым вы хотели бы поработать, через функцию:

options.imgs.click(function() {
            var allImgs = $("#big img");
            $("#big img").each(function(n) {
                    this.index = n;
            })
            animateImage(allImgs, this);
    })

};

function animateImage(images, img) {
    for(var i = 0; i < images.length; i++) {
            if (images[i].index == 0) {
                    alert($(img).index)
            }
    }
}

Answer 2

Когда вы находитесь внутри вызова click, первый параметр («this») - это элемент DOM, который вы щелкнули. Есть ли у вашего DOM-элемента свойство index?

Я также рекомендую использовать функцию «сброс объекта» (пример здесь: http://weblogs.asp.net/skillet/archive/2006/03/23/440940.aspx). Использование похоже на это:

$("a").click( function(){ 
   alert( object_dump( this ) ) 
});

(обратите внимание, что функция object_dump () возвращает строку, вам нужно «предупредить ()» или сделать что-то еще с ней).

Answer 3

См. Вызов функции «this» .

В основном вы хотите заменить

animateImage(allImgs);

с

animateImage.call(this, allImgs);

---

Вы можете преобразовать свой код в это (или что-то подобное):

options.imgs.click(function() {
    var allImgs = $("#big img");
    allImgs.each(function(n) {
        this.index = n;
    });

    allImgs.get(0).effect('scale', { percent: 200 }, 1000);
});

Вы также можете начать эффект внутри аргумента each, где n == 0. (Я не делал этого в своем примере, потому что он не совсем похож на ваш код (игнорируя ужасные проблемы параллелизма))