使用jQuery实现鼠标悬停切换首个<ul>内容的技术需求

需求说明 #

页面中第一个<ul>默认显示内容为111，当鼠标悬停在aaa、bbb、ccc上时，该<ul>分别切换显示111、222、333。

修正后的HTML结构 #

先调整HTML，让第一个<ul>里的<span>默认显示111：

<div>
  <ul>
    <li id="li_box"> <span id="span_Lan">111</span></li>
  </ul>
  <ul id="ul_box">
    <li><a id="lnk1" class="">aaa</a></li>
    <li><a id="lnk2" class="">bbb</a></li>
    <li><a id="lnk3" class="">ccc</a></li>
  </ul>
</div>

jQuery实现代码 #

以下是简洁的jQuery实现，直接绑定鼠标悬停事件完成内容切换：

// 等待DOM加载完成后执行
$(document).ready(function() {
  // 给目标a标签绑定mouseover事件
  $('#ul_box a').on('mouseover', function() {
    const $targetSpan = $('#span_Lan');
    // 根据当前a标签的ID设置对应内容
    switch($(this).attr('id')) {
      case 'lnk1':
        $targetSpan.text('111');
        break;
      case 'lnk2':
        $targetSpan.text('222');
        break;
      case 'lnk3':
        $targetSpan.text('333');
        break;
    }
  });
});

补充说明 #

• jQuery的$(document).ready()确保DOM加载完成后再执行代码，避免出现元素未找到的问题。
• 对比原生JS，jQuery简化了元素选择和事件绑定的逻辑，无需手动循环遍历子元素。
• 原原生JS代码存在两处问题：
  1. <span>元素不能用value属性设置内容，应使用textContent或innerHTML；
  2. 最后一个条件判断的ID写错为lnk2，应改为lnk3，否则悬停ccc时无法触发正确逻辑。

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