鼠标悬停时在两个列表中突出显示项目 [英] Highlight item in two lists when mouseover

问题描述

我有两个<ul>列表:

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

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

Where would I start to write code which when I hover over any <li> in either list, it will highlight the Item in the first list and the corresponding A in the second list.

例如，将鼠标悬停在列表1中的项目3"上应同时突出显示该内容和列表2中的"A3".

For instance, hovering over "Item 3" in list 1 should highlight both that and "A3" in list 2.

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

Important: The numbers are not present in the text of the lists, that was just to help explain. The actual HTML looks like this:

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

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

推荐答案

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

If your IDs will stay in that format, then:

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

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

这篇关于鼠标悬停时在两个列表中突出显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！