Question

我觉得这是一个非常简单的问题

我有一系列6张图片，其中id为1-6，我想运行鼠标悬停功能。以下代码可以使用

<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

您需要将所有id选择器作为逗号分隔的字符串提供给单个对象：

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

或者，更好的是，在所有这些元素上放置一个公共类，并选择一个类：

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

Answer 2

jQuery事件处理程序中的实例this包含您提供的选择器匹配的当前元素。它仅在回调函数中可用。这是正确的方法：

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

另请注意，为了获取元素的id，您应该使用this.prop('id')（对于DOM元素）或this.attr('id')（对于HTML元素）

jQuery this.id选择器语法问题？

2 个答案: