jQuery this.id селектор синтаксис проблема?

Question

У меня есть то, что я чувствую, довольно простая проблема

У меня есть серия из 6 изображений с идентификаторами, работающими 1-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> 

Спасибо за вашу помощь

Answer 1

Вы должны поставить все селекторы идентификаторов к одному объекту в виде разделенных запятыми строки:

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

Или, еще лучше, поставить общий класс по все эти элементы и выберите один класс:

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

Answer 2

Экземпляр this в обработчике события jQuery содержит текущий элемент, соответствующий выбранному вами селектору. Он доступен только в функции обратного вызова. Это правильный подход:

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

отметить также, что для того, чтобы получить идентификатор элемента, вы должны использовать this.prop('id') (для DOM элемента) или this.attr('id') (для HTML-элемента)