悬停在循环 JS/jquery 中的一个元素会改变另一个元素

Question

我正在制作一个返回多个项目的循环，我有一个收藏按钮，当悬停时它会运行一个 toggleClass 来更改图标，但它只在循环的第一项中这样做，有人可以帮助我吗？

<div class="favoriteButton" id="favoriteButton"> 
<i id="favoriteIcon" class="far fa-2x fa-heart"></i>
</div>

jQuery 代码：

// Favorite Icon
$("#favoriteIcon").hover(() => {
    $("#favoriteIcon").toggleClass("far fas"); 
});

循环：

for ($i = 0; $i < count($vehicles); $i++) { 
  echo '<div class="favoriteButton" id="favoriteButton"> 
        <i id="favoriteIcon" class="far fa-2x fa-heart"></i>
        </div>';
}

Answer 1

您的 for 循环生成 i 元素，它们都具有相同的 id favoriteIcon ，在 html 页面中，不同元素具有相同的 id 是不正确的；

将代码更改为使用类是正确的

for ($i = 0; $i < count($vehicles); $i++) { 
  echo '<div class="favoriteButton" > 
        <i class="far fa-2x fa-heart fav-icon-class"></i>
        </div>';
}

你用javascript来：

// Favorite Icon
$(".fav-icon-class").hover(function() {
    $(this).toggleClass("far fas"); 
});