rel jQuery attribut

Question

Nous avons beaucoup de liens avec rel attributs:

<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> 

Et un 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 de chaque lien peut avoir plusieurs valeurs (comme class="value1 value2 value3 value4"). Chaque valeur est utilisée pour marquer class similaires de <li>.

rel="t2 t3" marques <li class="t2">Some text</li> et <li class="t3">Some text</li>. Etc.

L'idée principale - quand nous hover un de ces liens, le script devrait trouver li s avec classe similaire dans la liste .team et activer active classe pour eux.

Par exemple, si nous faisons le lien avec hoverrel="t4 t6", le script devrait basculer la classe active pour <li class="t4">Some text</li> et <li class="t6">Some text</li>, comme <li class="t4 active">Some text</li> et <li class="t6 active">Some text</li>.

jQuery 1.3.2 est utilisé.

Une idée?

Merci.

Answer 1

Comme ceci:

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

Demo