jQuery rel 属性

Question

我们有很多与 rel 的链接属性:

<div class="team-tags">
 <a class="s1" rel="t1 t2 t3" href="#">One</a>
 <a class="s2" rel="t2 t3" href="#">Two</a>
 <a class="s3" rel="t1" href="#">Three</a>
 <a class="s4" rel="t4 t6" ref="#">Four</a>
 <a class="s5" rel="t2 t5" href="#">Five</a>
</div>

还有一个ul :

<ul class="team">
 <li class="t1">Some text</li>
 <li class="t2">Some text</li>
 <li class="t3">Some text</li>
 <li class="t4">Some text</li>
 <li class="t5">Some text</li>
 <li class="t6">Some text</li>
</ul>

rel每个链接的 可以有多个值(例如 class="value1 value2 value3 value4" )。每个值用于标记相似的 class的<li> .

rel="t2 t3"标记<li class="t2">Some text</li>和<li class="t3">Some text</li> 。等等。

主要思想 - 当我们 hover脚本应该找到这些链接中的任何一个 li s 里面有类似的类 .team列表和切换 active为他们上课。

例如，如果我们 hover链接为 rel="t4 t6" ，脚本应该切换类 active对于 <li class="t4">Some text</li>和<li class="t6">Some text</li> ，例如<li class="t4 active">Some text</li>和<li class="t6 active">Some text</li> .

使用 jQuery 1.3.2。

有什么想法吗？

谢谢。

Answer 1

像这样:

function getTeams(elem) {
    return $('.' + elem.rel.replace(' ', ', .'));
}
$('.team-tags a[rel]').hover(
    function() { getTeams(this).addClass('active'); },
    function() { getTeams(this).removeClass('active'); }
);

Demo