определение $ (это) в JQuery - PullRequest
Новая
       32

определение $ (это) в JQuery

5 голосов
/ 28 октября 2009

Распространенная проблема, с которой я сталкиваюсь - это путаница в понимании $ (this).

Я часто стараюсь придать ему странный стиль: 

$(this).css("border","10px solid red")

Что иногда помогает.

Однако я озадачен следующим. На мой вопрос можно ответить двумя способами:

1) существует ли универсальный способ «увидеть», на что ссылается $ (this) в той или иной ситуации? Возможно в сочетании с firebug?

2) более конкретно, есть ли какая-либо идея, на которую следует ссылаться в этом примере в этом примере? Я предполагал, что это был бы ввод с классом btnSave, но не похоже: 

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel();
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Ответы [ 4 ]

9 голосов
/ 28 октября 2009

1) Использование консоли в Firebug: 

var obj = $(this);
console.log(obj);

2) savePanel () не будет иметь корректный контекст для использования $ (this). Вы можете попробовать: 

$(ajaxContainer).find("input.btnSave").click(function(){
    $(this).css("border", "10px solid red");
});
4 голосов
/ 28 октября 2009

Первый вопрос (с использованием Firebug):

  1. Поместите точку останова где-нибудь в контексте, который вы хотите исследовать (например, внутри savePanel() в вашем примере).
  2. Когда ваше приложение достигает точки останова, добавьте $(this) на панель часов и раскройте ее, чтобы просмотреть ее свойства.
  3. Первое свойство должно быть "0", что соответствует первому узлу DOM, которому соответствует объект jQuery (в данном случае this).
  4. Если вы наведете указатель мыши на значение "0", Firebug выделит этот DOM-узел на странице. Если щелкнуть значение, Firebug переключится на вкладку HTML и перейдет к этому элементу.

Второй вопрос:

  • Внутри вашей анонимной функции this будет ссылаться на элемент <input />.
  • Внутри savePanel(), this будет ссылаться на объект window.

Если вы хотите, чтобы savePanel() имел доступ к элементу <input />, существует множество способов сделать это. В вашем случае проще всего передать его из анонимной функции: 

$(ajaxContainer).find("input.btnSave").click(function(){
  savePanel($(this));
});

function savePanel(inputElement) {
  inputElement.css("border","10px solid red");
}
1 голос
/ 28 октября 2009

В вашем примере кода вы столкнулись с классической проблемой JavaScript с потерянным контекстом для this , поскольку вызов другой функции из анонимной функции потеряет контекст из анонимной функции ( это здесь ). Когда savePanel вызывается так, как вы, это будет ссылаться на объект окна. Вы можете сохранить контекст this из обработчика событий, используя call или apply при делегировании метода: 

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.call(this);
});

// OR

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel.apply(this, arguments);
});

function savePanel() {
    $(this).css("border","10px solid red");
};
0 голосов
/ 28 октября 2009

«this» в javascript часто является источником путаницы, поскольку синтаксически он выглядит как переменная и, следовательно, подразумевает идею его передачи. На самом деле «this» больше похоже на функцию и всегда возвращает текущий контекст выполнения, то есть тот контекст, для которого была вызвана или применена текущая функция.

Если я не ошибаюсь, jquery пытается выполнить обратный вызов в контексте, который был вызван механизмом обратного вызова, то есть 

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })
...