实现点击切换图片及mouseenter/mouseleave事件图标切换的技术咨询

嘿，我看你这段代码已经搭好了mouseenter的逻辑框架，mouseleave部分还差收尾，还有个小细节需要修正，我来帮你补全并优化一下：

先说说现有代码的两个小问题：

• mouseleave里的图片路径写错了，应该指向默认状态的图标（不带_hover后缀），你现在写的dataTarget + 'hover_ico.png'不仅少了下划线，还还是hover状态的路径，会导致鼠标移出后图标没法还原；
• 选择器没写完，$('.cl...应该补全成.classSelection，和mouseenter里的选择器保持一致才能正确找到目标元素。

下面是补全并优化后的完整代码：

// 先缓存父元素，避免重复查找DOM，提升性能
const $selectionContainer = $('.classSelection');

$selectionContainer.find('.funcName').on({
    mouseenter: function (e) {
        const dataTarget = e.currentTarget.dataset.target;
        // 拼接hover状态的图片路径
        const hoverImgSrc = `//dustfade.com/img/${dataTarget}_hover_ico.png`;
        // 定位到对应的图标图片，替换src属性
        $selectionContainer.find(`.${dataTarget}_ico img`).attr('src', hoverImgSrc);
    },
    mouseleave: function (e) {
        const dataTarget = e.currentTarget.dataset.target;
        // 拼接默认状态的图片路径（注意去掉_hover后缀）
        const defaultImgSrc = `//dustfade.com/img/${dataTarget}_ico.png`;
        // 还原回默认图标
        $selectionContainer.find(`.${dataTarget}_ico img`).attr('src', defaultImgSrc);
    }
});

代码说明： #

1. 缓存DOM元素：先把.classSelection缓存到变量里，每次事件触发时不用重新查找这个父元素，能提升代码性能，尤其是页面元素较多的时候；
2. 修正图片路径：mouseleave里的路径改成了不带_hover的默认图标路径，确保鼠标移出后能切换回原始图标；
3. 简化选择器：把原来的两次find调用合并成一次（.find('.xxx_ico img')），代码更简洁高效；
4. 使用const声明变量：因为这些变量不会被重新赋值，用const比var更规范，也更安全。

如果你想避免图标切换时的闪烁问题，可以额外加一段预加载hover图标的代码：

// 预加载所有hover图标，防止切换时空白闪烁
$selectionContainer.find('.funcName').each(function() {
    const dataTarget = this.dataset.target;
    const hoverImg = new Image();
    hoverImg.src = `//dustfade.com/img/${dataTarget}_hover_ico.png`;
});

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