如何使用jQuery的.load方法实现鼠标悬停时切换li对应展示图片

问题原因 #

你当前的代码写死了加载 /image1.html 的内容，没有根据触发悬停的元素动态匹配对应的资源路径，所以所有悬停操作都只会加载image1的内容。

修复方案 #

首先我们给每个 .result 元素增加自定义属性，存储对应要加载的页面标识，再在事件回调里动态获取这个标识拼接加载路径即可：

调整后的HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cardList">
  <li>
    <span class="result" data-page="image1">image 1</span>
    <img class="imgAlt" src="image1.jpg" alt="image 1" />
  </li>
  <li>
    <span class="result" data-page="image2">image 2</span>
    <img class="imgAlt" src="image12.jpg" alt="Image 2" />
  </li>
  <li>
    <span class="result" data-page="image3">image 3</span>
    <img class="imgAlt" src="image3.jpg" alt="Image 3" />
  </li>
</ul>

<div class="cardPlaceholder">
  <img class="cardholder" src="placeholder image.jpg" alt="">
</div>

调整后的JS代码

$(document).ready(function() {
  $(".result").mouseover(function() {
    // 动态获取当前悬停元素对应的页面标识
    const pageName = $(this).data('page');
    // 拼接加载路径，替换原有的固定路径
    $(".cardPlaceholder").load(`/${pageName}.html .CLASS ELEMENT`).show();
    $(".cardholder").hide();
  }).mouseout(function() {
    // 鼠标移出时先清空加载的内容，再恢复占位图
    $(".cardPlaceholder").empty().append(`<img class="cardholder" src="placeholder image.jpg" alt="">`);
  })
});

额外说明 #

• 如果你的图片页面命名规则和span内的文本一致，也可以不用加data-page属性，直接用$(this).text().trim().replace(' ','')获取到image1这类标识，拼接路径即可。
• 鼠标移出时要清空cardPlaceholder之前加载的HTML内容，否则之前加载的图片会和恢复的占位图同时显示。

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