jQuery rel属性

时间:2010-07-13 14:23:14

标签: jquery attributes hover toggle

我们有许多与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列表中找到.team类似的类并切换{{1}他们的类。

例如,如果我们activehover相关联,则脚本应切换rel="t4 t6"active的类<li class="t4">Some text</li>,例如<li class="t6">Some text</li><li class="t4 active">Some text</li>

使用jQuery 1.3.2。

有什么想法吗?

感谢。

1 个答案:

答案 0 :(得分:3)

像这样:

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

Demo