Question

我有三个无序列表，每个列表包含一组项目的子集，列表之间有重复的条目。当我将鼠标悬停在该项目的任何实例上时，我想突出显示所有列表中的匹配项。因此，如果ITEM-A包含在列表1和1中。 3，当我将鼠标悬停在列表1或3中的ITEM-A上时，我希望为该项目的两个实例分配一个类，然后我可以对其进行样式设置。想想谷歌翻译，但相同的项目，而不是翻译的字符串。为了将CSS类附加到匹配项，我以编程方式复制title属性中列表项的内容（我必须这样做，因为内容可用并且需要多种语言），我希望我可以使用jquery / CSS属性选择器作为匹配的一种方式。

代码如下所示：

<ul class="tags">
   <li title="ITEM-C">ITEM-C</li>
   <li title="ITEM-D">ITEM-D</li>
   <li title="ITEM-F">ITEM-F</li>
</ul>

<ul class="tags">
   <li title="ITEM-A">ITEM-A</li>
   <li title="ITEM-C">ITEM-C</li>
   <li title="ITEM-D">ITEM-D</li>
</ul>

<ul class="tags">
   <li title="ITEM-D">ITEM-D</li>
   <li title="ITEM-F">ITEM-F</li>
   <li title="ITEM-G">ITEM-G</li>
</ul>

先谢谢你的帮助。

Answer 1

这样的东西？

$('li').hover(function(){
    $("li[title='" + this.title + "']").addClass('yourClass');
}, function() {
    $("li[title='" + this.title + "']").removeClass('yourClass');
});

你可以测试它here

Answer 2

var index = {};

$("ul.tags li")
.each(function () {
    if ( !(this.title in index) ) {
        index[this.title] = $();
    }
    index[this.title].push(this);
})
.hover(
    function () {
        index[this.title].addClass("highlight");
    },
    function () {
        index[this.title].removeClass("highlight");
    }
);

查看实际操作：http://jsfiddle.net/Tomalak/4cLvB/

在悬停时突出显示其他列表中的相应列表项

2 个答案: