Mettez en surbrillance plusieurs lignes en utilisant jQuery

Question

Je suis en train de mettre en place un succinct jQuery matrix parce que j'ai du mal à naviguer sur le site jQuery, et les feuilles de triche ne semblent pas me fournir ce que je veux non plus.

Voici comment je mettre en évidence les lignes:

$('.eq').hover(function() { 
    $('.eq').toggleClass('highlight'); 
}); 
$('.is').hover(function() { 
    $('.is').toggleClass('highlight'); 
}); 

Q: Comment puis-je écrire une fonction qui dit « basculer tout dans la même classe que ce qui est plané au-dessus »? Quelque chose comme:

function toggle(that){ 
    $(that.className).toggleClass('highlight'); 
} 

Answer 1

Saviez-vous que tables can have multiple tbody elements? Il suffit d'enrouler des ensembles de lignes dans des éléments tbody distincts. Et nous pouvons utiliser:

$('tbody').hover(function() { 
    $(this).toggleClass('highlight'); 
}); 

et dans les navigateurs plus récents, il peut être fait en utilisant CSS seulement:

tbody { 
    /* Normal style */ 
} 

tbody:hover { 
    /* Highlighted style */ 
} 

Answer 2

« Comment puis-je écrire une fonction qui dit « tout basculer dans la même classe que ce qui est plané au-dessus »? »

Les éléments peuvent avoir plusieurs classes, et voudriez-vous faire avec tous les éléments de toute façon? Une meilleure approche peut être d'écrire un plugin pour les éléments que vous voulez, comme ceci:

$.fn.highlightClass = function() { 
    return this.hover(function() { 
    $("."+this.className.split(" ").join(",.")).toggleClass("highlight"); 
    }); 
}; 

Ensuite, vous appelleriez sur les éléments qui vous passionnent, par exemple:

$(".eq, .is").highlightClass(); 

Si vous avait par exemple un élément class="eq test", il le remplaçait par un sélecteur ".eq,.test" et basculait la classe highlight sur tous ces éléments. Il suffit de changer l'appel .join() à .join(".") si vous voulez mettre en surbrillance seulement les éléments avec tous les les classes des éléments que vous planez, par opposition à des classes ... comme je l'ai ci-dessus.

Answer 3

Si vous assignez une seule classe à l'élément HTML qui planait utilisez cette version légèrement modifiée:

function toggle(that){ 
    $("." + that.className).toggleClass('highlight'); 
}