jQuery에서 $ (this)를 결정합니다

StackOverflow https://stackoverflow.com/questions/1634017

  •  06-07-2019
  •  | 
  •  

문제

내가 가진 일반적인 문제는 $ (this)가 언급 한 내용이 혼란스러워하는 것입니다.

나는 종종 이상한 스타일을 주려고 노력할 것입니다.

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

때때로 도움이됩니다.

그러나 나는 다음과 같이 혼란스러워합니다. 내 질문은 두 가지 방법으로 대답 할 수 있습니다.

1) 주어진 상황에서 $ (this)가 무엇을 언급하는지 '보는'보편적 인 방법이 있습니까? 아마도 Firebug와 함께?

2) 더 구체적으로, 아래 샘플에서 $ (this)가 무엇을 참조 해야하는지 아는가? 나는 그것이 Btnsave 클래스의 입력이었을 것이라고 생각했지만 : 그렇지 않은 것 같습니다.

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

function savePanel() {
    $(this).css("border","10px solid red");
};
도움이 되었습니까?

해결책

1) FireBug에서 콘솔을 사용하십시오.

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

2) SavePanel ()은 $ (this)를 사용하는 데 맞는 컨텍스트가 없습니다. 당신은 시도 할 수 있습니다 :

$(ajaxContainer).find("input.btnSave").click(function(){
    $(this).css("border", "10px solid red");
});

다른 팁

첫 번째 질문 (Firebug 사용) :

  1. 조사하고자하는 맥락에서 어딘가에 중단 점을 배치하십시오 (예 : 내부 savePanel() 당신의 예에서).
  2. 응용 프로그램이 중단 점에 도달하면 추가하십시오 $(this) 시계 패널로, 속성을 볼 수 있도록 확장하십시오.
  3. 첫 번째 속성은해야합니다 "0", jQuery 객체와 일치하는 첫 번째 DOM 노드에 해당합니다 (이 경우, this).
  4. 당신이 값을 가리키면 "0", FireBug는 페이지의 DOM 노드를 강조합니다. 값을 클릭하면 FireBug가 HTML 탭으로 전환하여 해당 요소로 스크롤합니다.

두 번째 질문 :

  • 익명 기능의 내부, this will refer to the <input /> 요소.
  • 내면에 savePanel(), this will refer to the window 물체.

네가 원한다면 savePanel() 접근 할 수 있습니다 <input /> 요소, 다양한 방법이 있습니다. 귀하의 경우 가장 간단한 것은 익명 기능에서 전달하는 것입니다.

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

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

코드 샘플에서 손실 된 컨텍스트로 고전적인 JavaScript 문제가 발생합니다. 이것, 익명 함수에서 다른 함수를 호출하면 익명 함수에서 컨텍스트가 손실됩니다 (그것에 대해 자세히 알아보십시오). SavePanel이 당신처럼 부르면 이것 창 객체를 참조합니다. 당신은의 맥락을 유지할 수 있습니다 이것, 이벤트 핸들러에서 사용하여 사용합니다 전화하거나 신청하십시오 방법을 위임 할 때 :

$(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");
};

"이"는 자바 스크립트가 종종 혼란의 원천입니다. 왜냐하면 그것은 구문 적으로 변수처럼 보이므로 그것을 통과한다는 아이디어를 암시하기 때문입니다. 실제로, "이"는 함수와 비슷하며 항상 현재 실행 컨텍스트, 즉 현재 함수가 요구되거나 적용 된 컨텍스트를 반환합니다.

내가 착각하지 않으면 jQuery

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top