javascript - 鼠标悬停时突出显示两个列表中的项目

Question

我有两个 <ul>列表:

Item 1     A5
Item 2     A4
Item 3     A2
Item 4     A1
Item 5     A3

当我将鼠标悬停在任何 <li> 上时，我将从哪里开始编写代码？在任一列表中，它将突出显示第一个列表中的 Item 和第二个列表中的相应 A。

例如，将鼠标悬停在列表 1 中的“第 3 项”上应该同时突出显示该项目和列表 2 中的“A3”。

重要:列表的文本中没有数字，那只是为了帮助解释。实际的 HTML 看起来像这样:

<ul class="list1">
    <li id="qq1">dfgfdgfdg</li>
    ....
</ul>

<ul class="list2">
    <li id="aa1">cvbcvbcvb</li>
    ....
</ul>

Answer 1

如果您的 ID 将保持该格式，则:

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    $("#qq" + n + ", #aa" + n).toggleClass("highlight");
});

演示:http://jsfiddle.net/e37Yg/