Question

<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div class="a" style='font-size:50'>a</div>
<div class="b" style='font-size:50'>b</div>
<div class="c" style='font-size:50'>c</div>

<script>
var classes = ['a', 'b', 'c'];
for (var i = 0; i < classes.length; i++) {
  $("."+classes[i]).mouseover(function() {
    console.log(i);
    console.log(classes[i]);
  });
}
</script>

</body>
</html>

这是我可以创建的问题的最简单的再现。当鼠标悬停元素时，有两件事是错误的：

log(i)始终记录'3'，这没有意义，因为循环结束于2。
classes[i]返回Undefined，即使我刚刚在脚本的顶部定义它。

Answer 1

请改用.each()和.filter()扩展程序。这将解决很多问题，因为您不必使用整数。为此，请参阅以下代码：

$('div').filter(function() {
  return $(this).hasClass('a') || $(this).hasClass('b') || $(this).hasClass('c'); //gets any divs with the class 'a', 'b', or 'c'
}).each(function(){ // performs a function on each of these divs
  console.log($(this).text()); // logs each divs inner text (change as required)
})

Mouseover事件始终使用for（）循环的最后一个索引

1 个答案: