Refactoring et séchage du code jQuery

Question

Ce que je fais est d'ajouter une classe à tous les éléments qui ont le même nom de classe que l'identifiant que je suis en train de planer. Par exemple lorsque je survole un élément de la liste avec l'id de la voyelle, alors tous les éléments span avec la classe du nom voyelle sont traités (en ajoutant une classe).

Je peux le faire sans problèmes. Mais je veux faire la même chose pour beaucoup d'autres noms d'id avec les noms de classe correspondants. Exemples: consonnes, semi-voyelles, gutturals, palatals, etc.

Je pourrais faire tout cela avec des fonctions différentes mais je veux faire est d'appeler une fonction qui effectuera les mêmes tâches mais sera assez intelligent pour trouver le nom de l'ID et générer le nom de la classe à partir de celui-ci.

Comment puis-je extraire le nom de l'identifiant dans une variable et l'affecter au nom de la classe.

Answer 1

Vous pouvez le faire:

$("[id]").hover(function() { 
    $("." + this.id).addClass("highlight"); 
}, function() { 
    $("." + this.id).removeClass("highlight"); 
}); 

mais je ne recommanderais pas nécessairement. Je serais plus enclin à le définir statiquement:

var ids = ["vowels", "consonants"]; 
for (var i = 0; i < ids.length; i++) { 
    $("#" + ids[i]).hover(function() { 
    $("." + this.id).addClass("highlight"); 
    }, function() { 
    $("." + this.id).removeClass("highlight"); 
    }); 
} 

ou quelque chose comme ça.

Answer 2

Vous pouvez utiliser un plug-in:

$.fn.highlight = function() { 
    return this.each(function() { 
     $(this).hover(function() { 
      var id = $(this).attr('id'); 
      $('.'+id).addClass('myclass'); 
     }); 
    }); 
} 

que vous pourriez appeler comme ceci:

$(document).ready(function() { 
    $('span').highlight(); 
});