Question orientée objet jQuery

Question

$("#e1").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e1d").addClass("show");
});

$("#e2").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e2d").addClass("show");
});

Je cherche à trouver un moyen de ne pas répéter le code et de faire en sorte que jQuery recherche automatiquement et lie les divs. Ce serait merveilleux de lier chaque id avec le nom e1~∞ à e1~∞d. Je ne suis pas sûr de la manière d'implémenter la méthodologie orientée objet appropriée. Merci de votre lecture!

Answer 1

Donnez des classes à vos éléments puis référencez-les dans le jQuery via le nom de la classe :

$(".trigger").click(function() {
      $('#descriptions>div').removeClass("show");
      $(this)
      .next("div.description")
      .addClass("show");
});

Tout cela dit, on dirait que vous voulez afficher/masquer des divs. Vous pouvez envisager d'utiliser 'toggle' de jQuery pour cela.

Answer 2

Quelque chose comme ceci pourrait fonctionner:

$("id^='e'").click(function() {
    $("#descriptions div").removeClass("show");
    $("#" + $(this).attr("id") + "d").addClass("show");
});

L'expression "id^='e'" sélectionne tous les éléments pour lesquels l'identifiant commence par e. Donc, comme vous le voyez, e1 n'est pas un très bon nom... Prenez plutôt quelque chose de plus descriptif.

Mais encore mieux, si e fait référence à plusieurs éléments, pourquoi ne pas en faire un nom de classe e comme ceci?

Alors, jQuery est plus facile à lire et à comprendre.

Answer 3

Vous pourriez utiliser jQuery Regex Filter et utiliser une simple regex pour lier l'événement de clic. Bien que j'irais avec des IDs différents qui permettraient la réponse de Paul.

Answer 4

Vous pourriez définir votre fonction sur l'objet jQuery pour gérer ceci.

$.fn.toggleShow = function(){
     $("#descriptions div").removeClass("show");
     $("#" + $(this).attr('id') + "d").addClass("show");  
}

$("#e1").click(function(){
     $(this).toggleAffichage();
});