动态加载wrapper中图标hover切换显示的实现方法咨询

问题 #

我在.wrapper容器内包含两个图标，需求是实现鼠标悬停时隐藏其中一个图标并显示另一个的效果。需要注意的是.wrapper是动态加载的，因此必须通过document来获取元素，同时希望使用this关键字确保仅修改当前被hover的元素。我编写了如下初步代码，请问该如何正确实现需求？

我的代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<div class="wrapper">
  <i class="fa-regular fa-heart"></i>
  <i class="fa-solid fa-heart"></i>
</div>

<div class="wrapper">
  <i class="fa-regular fa-heart"></i>
  <i class="fa-solid fa-heart"></i>
</div>

CSS

.wrapper i {
  font-size: 40px;
  margin-top: 4%;
  cursor: pointer;
}

.wrapper .fa-regular {
  display: flex;
}

.wrapper .fa-solid {
  display: none;
  color: rgb(224, 0, 0);
}

JavaScript

var fa_regular;
var fa_solid;

$(document).on('mouseenter', '.wrapper .fa-regular', function() {
  fa_regular = $(this)
  $(fa_regular).css('display', 'none')
  $(fa_solid).css('display', 'flex')
});

$(document).on('mouseleave', '.wrapper .fa-solid', function() {
  fa_solid = $(this)
  $(fa_regular).css('display', 'flex')
  $(fa_solid).css('display', 'none')
});

解决方案 #

你的代码有两个关键问题：

1. 全局变量fa_regular和fa_solid会被所有.wrapper的hover事件覆盖，导致多个容器互相干扰；
2. 事件绑定在图标上，鼠标离开时如果触发在图标外的.wrapper区域，逻辑会直接失效。

修正后的JavaScript方案 #

把hover事件绑定到.wrapper容器上（通过document委托支持动态加载），用this定位当前容器内的两个图标，彻底避免全局变量问题：

// 监听wrapper的鼠标进入事件
$(document).on('mouseenter', '.wrapper', function() {
  $(this).find('.fa-regular').css('display', 'none');
  $(this).find('.fa-solid').css('display', 'flex');
});

// 监听wrapper的鼠标离开事件
$(document).on('mouseleave', '.wrapper', function() {
  $(this).find('.fa-regular').css('display', 'flex');
  $(this).find('.fa-solid').css('display', 'none');
});

更简洁的CSS方案（推荐） #

完全不需要JavaScript，用CSS的:hover伪类就能实现相同效果，天然支持动态加载的.wrapper，代码更简洁高效：

.wrapper i {
  font-size: 40px;
  margin-top: 4%;
  cursor: pointer;
}

.wrapper .fa-regular {
  display: flex;
}

.wrapper .fa-solid {
  display: none;
  color: rgb(224, 0, 0);
}

/* 鼠标悬停在wrapper上时切换图标显示状态 */
.wrapper:hover .fa-regular {
  display: none;
}

.wrapper:hover .fa-solid {
  display: flex;
}

使用这个方案的话，直接删除原来的JavaScript代码即可，效果完全一致。

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