Hovering one element changes another in the loop JS/jquery

Question

I'm making a loop that returns several items, I have a Favorite button that when hover it runs a toggleClass to change the icon, but it only does that in the first item of the loop, can someone help me ?

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

jQuery code:

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

Loop:

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

An `id` must be unique. Don't use `id` in loop that create DOM elements. Use the class instead. — Louys Patrice Bessette, Jan 05 '21 at 04:11
Does this answer your question? [jQuery id selector works only for the first element](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Don't Panic, Jan 05 '21 at 09:19
@LouysPatriceBessette when I pass class it changes all the icons on the page that the loop generates — Gustavo Mello, Jan 05 '21 at 14:18

score 0 · Accepted Answer · edited Jan 06 '21 at 08:18

0

Your for loop generate i elements which all have the same id favoriteIcon , in an html page it is incorrect for different elements to have the same id;

It would be correct to change your code to use classes instead like

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

and you javascript to :

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

edited Jan 06 '21 at 08:18

Gustavo Mello

93
7

answered Jan 05 '21 at 04:12

ZIASH

135
5

1

$ (This) ... returns this to me: `Window {window: Window, self: Window, document: document, name: "", location: Location,…}` and if I don't pass $(this) but the class name as $(". fav-icon-class")... it changes all the icons in the loop @bassxzero – Gustavo Mello Jan 05 '21 at 14:10
Change `() =>` for `function()`. The [arrow Fuction Expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) has some limitations... Like it has no binding for `this`. – Louys Patrice Bessette Jan 05 '21 at 16:33

Hovering one element changes another in the loop JS/jquery

1 Answers1