jQuery -通过`for`循环悬停时显示文本

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。for 循环是 JavaScript 中的一种基本循环结构，用于重复执行一段代码多次。

类型

这种技术属于前端开发中的事件处理和 DOM 操作。

应用场景

适用于需要在用户与网页元素交互时提供即时反馈的场景，例如悬停在一个按钮上时显示提示信息，或者在悬停在一个列表项上时显示详细信息。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 和 for 循环来实现悬停时显示文本的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Hover Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .hover-text {
    display: none;
  }
</style>
<script>
$(document).ready(function() {
  // 假设有多个元素需要绑定悬停事件
  var elements = ['.item1', '.item2', '.item3'];

  // 使用 for 循环绑定悬停事件
  for (var i = 0; i < elements.length; i++) {
    $(elements[i]).hover(
      function() {
        // 鼠标进入时显示文本
        $(this).find('.hover-text').show();
      },
      function() {
        // 鼠标离开时隐藏文本
        $(this).find('.hover-text').hide();
      }
    );
  }
});
</script>
</head>
<body>

<div class="item1">
  Hover over me
  <span class="hover-text">This is item 1</span>
</div>

<div class="item2">
  Hover over me
  <span class="hover-text">This is item 2</span>
</div>

<div class="item3">
  Hover over me
  <span class="hover-text">This is item 3</span>
</div>

</body>
</html>