您如何使用JQuery和data-rel在链接元素中启动CSS效果？

Question

当用户匹配两张纸牌时，我正在纸牌游戏（记忆游戏）中动态生成列表项。该列表在游戏板的右侧生成，并且在比赛之后创建的每个LI元素都将获得一个DATA-REL，该数据对应于匹配的纸牌ID和CLASS。

匹配的卡片HTML：

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

动态生成的以HTML结尾的LI元素：

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

[当用户将鼠标悬停在数据相关的card1的数据相关的LI元素上时，我希望类/ ID为'i'的元素点亮。

我还没有真正使用过多的数据元素，我想知道它们如何工作以及如何使它工作。任何帮助，将不胜感激。

Answer 1

您好，没有测试以下内容，但尝试以下操作：

$('[data-rel]').hover(function() {
 $('.' + $(this).data('rel')).addClass('highlighted');
}, 
function() {
 $('.' + $(this).data('rel')).removeClass('highlighted');
});