jQuery this.id 선택기 구문 문제가 있습니까?

Question

나는 아주 간단한 문제라고 느낀다.

나는 1-6의 ID를 가진 일련의 6 개의 이미지를 가지고 있는데, 나는 mouseover 함수를 실행하고 싶다. 다음 코드는 작동합니다.

<script>$('#0').mouseover(function(){alert(this.id)});</script> 
<script>$('#1').mouseover(function(){alert(this.id)});</script> 
<script>$('#2').mouseover(function(){alert(this.id)});</script> 
<script>$('#3').mouseover(function(){alert(this.id)});</script> 
<script>$('#4').mouseover(function(){alert(this.id)});</script> 
<script>$('#5').mouseover(function(){alert(this.id)});</script> 
<script>$('#6').mouseover(function(){alert(this.id)});</script> 

하지만이 코드를 한 줄로 쓰고 싶습니다. 나는 다음과 같은 것이 효과가 있다고 생각했지만 그렇지 않다. 내가 놓친 게 뭐야? 당신의 도움에 대한

<script>$('#' + this.id).mouseover(function(){alert(this.id)});</script> 

덕분에 당신은 쉼표로 구분 된 문자열로 단일 객체에 모든 ID 선택기를 제공해야

Answer 1

:

$('#0, #1, #2, #3, #4, #5, #6').mouseover(function() { 
    console.log(this.id); 
}); 

이 또는 더 나은 아직,에 공통의 클래스를 넣어 모든 요소를 ​​선택하고 그 하나의 클래스로 선택하십시오 :

$('.myClass').mouseover(function() { 
    console.log(this.id); 
}); 

Answer 2

인스턴스jQuery 이벤트 핸들러의에는 사용자가 제공 한 선택기와 일치하는 현재 요소가 들어 있습니다. 콜백 함수에서만 사용할 수 있습니다. 이것은 올바른 방법입니다 :

$('#0, #1, #2, #3, #4, #5, #6').mouseover(function() { 
    alert(this.prop('id')); 
}); 

는 또한, 요소의 ID를 취득하기 위해 점에 유의 당신이 this.prop('id')를 사용해야합니다 (HTML 요소) 또는 this.attr('id') (DOM 요소에 대한)