jQuery OnClick 및 객체를 참조했습니다

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

  •  20-08-2019
  •  | 
  •  

문제

다음 jQuery 표현식이 있습니다. 함수 내부에는 클릭 한 객체에 대한 참조가 필요합니다.이 작업을 수행하는 방법이 있습니까?

$('#tagList li').click(function() {
  /* contents */
});
도움이 되었습니까?

해결책

사용 

$ (this)

다른 팁

반환 값을 사용할 수 있습니다

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

또는 원한다면 jQuery 모드에서 객체를 간단하게 지적 할 수 있습니다.

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

jQuery를 처음 접한다면 강하게 제안합니다 당신은 일부 스크린 캐스트를 볼 수 있습니다 레미 샤프 안에 디자이너를위한 jQuery, 그들은 jQuery가 어떻게 작동하는지 약간 이해하는 것이 좋습니다. Console.log () 사용할 수있는 물체를보기 위해!

예, this 키워드는 클릭 한 DOM 요소를 참조합니다. 다음과 같이 "포장"할 수 있습니다.

$(this)

이를 통해 jQuery 객체로 취급 할 수 있습니다.

그만큼 이것 키워드는 당신이 찾고있는 것입니다. 종종 jQuery 함수를 이것 당신의 일을하기 위해. 예시:

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

더 많은 사용 사례, 특히 화살표 기능을 사용하려는 경우 더 많은 사용 사례를 다루는 새로운 답변을 추가합니다.

Li 요소에 JS 클릭을 추가하지 않는 것이 좋습니다. 대신이 요소 내부에 중첩 된 버튼이나 앵커 (클릭 가능한)를 사용해야합니다.

클릭하는 요소는 아이가 될 수 있으므로 올바른 요소를 대상으로해야합니다.

내 예에서는 LI 내부의 버튼과 클래스에 클릭을 할당 할 것입니다. 마크 업은 단순히 다음과 같습니다.

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

그런 다음 JavaScript :

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});

이를 통해 클릭이 등록 된 요소를 대상으로합니다. 버튼 (예 : OR) 안에 중첩 된 마크 업이있는 경우 클릭을 할당하려는 요소가 아닌 이벤트 대상이 중첩 요소가 될 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top