Dynamicznie generuję element listy w grze karcianej (gra pamięciowa), gdy użytkownik dopasuje dwie karty. Lista jest generowana po prawej stronie planszy, a każdy element LI, który jest tworzony po meczu, otrzymuje DATA-REL, który odpowiada pasującym ID karty i KLASIE.

Dopasowane karty HTML:

<i class="card1" id="card1">
Matched card
</i>

Dynamicznie generowane elementy LI kończące HTML:

<li data-rel="card1"></li>

Chcę, aby element „i” z klasą / identyfikatorem zapalał się, gdy użytkownik najedzie kursorem na element data-rel LI z elementem data-rel „card1”.

Tak naprawdę nie pracowałem zbyt wiele z elementami danych i zastanawiam się, jak one działają i jak to działa. Każda pomoc będzie mile widziana.

1
User14289 20 listopad 2019, 23:29
Czy masz fragment lub jsfiddle swojego działającego kodu? Czy używasz też css?
 – 
King11
20 listopad 2019, 23:31
Mogę dodać kod, ale po prostu postawiłbym na kod HTML, ponieważ nie wiem, jak to zrobić za pomocą JS. Efektem końcowym byłaby po prostu 5-pikselowa ramka w kolorze czerwonym wokół przedmiotu.
 – 
User14289
20 listopad 2019, 23:36
„Tak naprawdę nie pracowałem zbyt wiele z elementami danych i zastanawiam się, jak one działają” - a) atrybut danych, nie element i b) „działają” " tak samo jak każdy inny atrybut, w odniesieniu do tego, czego chcesz - sprawdź termin selektor atrybutów CSS.
 – 
04FS
20 listopad 2019, 23:39
Zły dzień, co kolego?
 – 
User14289
20 listopad 2019, 23:51

1 odpowiedź

Cześć, nie testowałem następujących rzeczy, ale spróbuj czegoś takiego:

$('[data-rel]').hover(function() {
 $('.' + $(this).data('rel')).addClass('highlighted');
}, 
function() {
 $('.' + $(this).data('rel')).removeClass('highlighted');
});
0
Gijs Beijer 20 listopad 2019, 23:33