JavaScript：数组、for循环与函数实现悬停切换图片源

我明白你现在的痛点——写一堆重复的mouseover事件不仅代码冗余，后期维护也很麻烦。其实用循环或者更高效的事件委托就能轻松解决这个问题，下面给你两种可行的方案：

方案一：用jQuery的.each()批量绑定事件 #

这种方法直接遍历所有列表链接，利用遍历的索引对应imgUrl数组的下标，完美匹配你现有id的顺序：

var imgUrl = [
  "url 1",
  "url 2",
  "url 3",
  "url 4",
  "url 5",
  "url 6",
  "url 7"
];

$(document).ready(function() {
  // 选中所有.menu下的a标签，遍历绑定事件
  $(".menu a").each(function(index) {
    $(this).mouseover(function() {
      // index就是当前元素在集合中的位置，刚好对应imgUrl的下标
      $("#mainImage").attr("src", imgUrl[index]);
    });
  });
});

说明： #

• $(".menu a")一次性选中所有列表里的链接元素
• .each()遍历过程中，index参数从0开始递增，和你的imgUrl数组下标完全对应（第一个链接对应index0→imgUrl[0]）
• 相比你原来的写法，不管有多少个列表项，都只需要一段代码搞定

方案二：事件委托（更推荐） #

如果你的列表项可能动态添加（比如后续通过JS新增li），或者想追求更高效的事件绑定，事件委托是更好的选择——只需要给父元素绑定一次事件，就能处理所有子元素的交互：

var imgUrl = [
  "url 1",
  "url 2",
  "url 3",
  "url 4",
  "url 5",
  "url 6",
  "url 7"
];

$(document).ready(function() {
  // 给父元素ul.menu绑定mouseover事件，委托给子元素a
  $(".menu").on("mouseover", "a", function() {
    // 从id中提取数字部分，比如"id-1"提取出1，减1得到数组下标
    var idNumber = parseInt($(this).attr("id").split("-")[1]);
    $("#mainImage").attr("src", imgUrl[idNumber - 1]);
  });
});

说明： #

• 事件绑定在父元素.menu上，当鼠标悬停在子元素a上时，事件会冒泡到父元素触发处理函数
• 通过split("-")把id拆分成数组，取第二个元素就是数字部分，转成整数后减1，刚好对应imgUrl的数组下标（比如id-1对应下标0）
• 即使后续新增列表项，只要id格式保持id-数字，就不需要重新绑定事件，自动生效

保留你的HTML结构不变 #

你的HTML部分完全不需要修改，直接用原来的结构即可：

<div class="main">
  <img id="mainImage" src="url">
</div>
<ul class="menu">
  <li><a href="#" id="id-1">one</a></li>
  <li><a href="#" id="id-2">two</a></li>
  <li><a href="#" id="id-3">three</a></li>
  <li><a href="#" id="id-4">four</a></li>
  <li><a href="#" id="id-5">five</a></li>
  <li><a href="#" id="id-6">six</a></li>
  <li><a href="#" id="id-7">seven</a></li>
</ul>

内容的提问来源于stack exchange，提问作者310_hills