用另一个图标替换一个图标

Question

我在包装器中有两个图标，我想实现的是当鼠标悬停在图标上时，其中一个图标隐藏，另一个图标显示。需要注意的是，包装器是动态加载的，所以我需要通过document访问它们。另外，我尝试使用this，因为我只想更改悬停的元素。我怎样才能做到这一点？我在下面写了一个粗略的代码。提前感谢

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')
});

.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);
}

<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>

Answer 1

$obj->parent.wrapper->在内部查找

$(document).on('mouseenter', '.wrapper .fa-regular', function() {
$(this).css('display', 'none')
$(this).parent().find('.fa_solid').css('display', 'flex')
});
$(document).on('mouseleave', '.wrapper .fa-solid', function() {
$(this).css('display', 'none')
$(this).parent().find('.fa_solid').css('display', 'flex')
});