11521 sujets

JavaScript, DOM et API Web HTML5

Fonction jQuery qui gère plusieurs boutons

Bonjour à tous,

J'ai pour projet de créer un petit site qui me permettrai de centraliser mes connaissances dans le développement web, une sorte de mémo du développeur.

Pour rendre mon site plus "parlant", je veux le rendre dynamique avec des boutons avec lesquels je peux interagir.

Pour l'instant ça marche parfaitement, mais je débute avec jQuery et je ne sais pas comment rendre mon code jQuery plus optimisé..

J'aimerai une seule fonction qui gère tous les boutons, plutôt que une fonction par bouton comme j'ai là.

Voici mon code : https://codepen.io/flosrn/pen/pLmWNO
Salut

Tu pourrais faire un truc du genre 


$(".btn__3-1, .btn__3-2, .btn__3-3, .btn__3-4").click()


ou

$(".row_3 > button").click()


ou 

$("button").click(); //plus général !


Et à l'intérieur de cette fonction tu test la classe en cours du genre

if ($(this).hasClass("btn__3-1"){
//remove
//add
}

this étant le contexte actuel, si tu click sur tel ou tel button, this "deviendra" le button sur lequel tu as clické.
Modifié par JENCAL (13 Apr 2018 - 10:49)
et typiquement, ce genre d'écriture
  
  $(".text__3-1").removeClass("text__3-1--clicked");  
  $(".text__3-2").removeClass("text__3-2--clicked"); 
  $(".text__3-3").removeClass("text__3-3--clicked"); 
  $(".text__3-4").removeClass("text__3-4--clicked");


tu peux le réduire


for (var i = 1; i < 5 ; i++)
{
  $(".text__3-"+i).removeClass("text__3-"+i+"--clicked"); 
}

Modifié par JENCAL (13 Apr 2018 - 10:53)
Super merci pour ta réponse ça marche Smiley biggrin

Mais je me demandais si il n'existait pas une façon de faire plus générique ? C'est à dire une seule fonction qui prendrait en paramètres les différents boutons.

C'est possible ça tu penses ?
Ah d'accord..
parce qu'en fait ça ce n'est qu'une petite partie de mon projet, a terme il y aura plein d'autres propriétés CSS comme des effets, des transitions, avec des boutons comme pour mon premier exemple.

Donc j'ai peur que ca devienne vite fouilli, je vais me retrouver avec un fichier jQuery long comme mon bras Smiley ohwell
En fait je voudrais quelque chose comme ça : 


new Button($("btn__3-2"), $(".box__3-2"), $("text__3-1--clicked"), $("text__3-2--clicked"), $("text__3-3--clicked"), $("text__3-4--clicked"));

class Button {
  constructor(btn, box2, text1, text2, text3, text4) {
    this.btn = btn;
    this.box2 = box2;
    this.text1 = text1;
    this.text2 = text2; 
    this.text3 = text3;
    this.text4 = text4;
    this.events();
  }

  events() {
    $("button").click(function() {
      if ($(this).hasClass(this.btn)) {
        this.box2.removeClass("box__3-2--clicked-2");
        this.box2.removeClass("box__3-2--clicked-3");
        this.box2.addClass("box__3-2--clicked");

        this.text1.removeClass("text__3-1--clicked");
        this.text2.addClass("text__3-2--clicked");
        this.text3.removeClass("text__3-3--clicked");
        this.text4.removeClass("text__3-4--clicked");
      }
    });
  }
}


Une fonction générique qui prend en paramètres les différents boutons.

Pour l'instant ça ne fonctionne pas mais je suis pas loin d'y arriver, si quelqu'un peut me donner un petit coup de pouce Smiley biggrin
Non 2000 lignes c'est beaucoup trop, pourquoi en venir là!!
Il faut atomifier les composants et via grunt faire en sorte d'avoir de compiler juste le dû!!!
Idéalement vous devriez songer à react ou autre clône de jQuery pour vous venir en aide. Après c'est une question de volumétrie, je le sais j'étais DBA as400!!
lemisterdelouess a écrit :
Non 2000 lignes c'est beaucoup trop, pourquoi en venir là!!
Il faut atomifier les composants et via grunt faire en sorte d'avoir de compiler juste le dû!!!
Idéalement vous devriez songer à react ou autre clône de jQuery pour vous venir en aide. Après c'est une question de volumétrie, je le sais j'étais DBA as400!!


Oui oui c'est moduler, j'ai une vingtaine de fichier a 2000 ligne chacuns... si je module plus c'est n'importe quoi, 200 fichier pour 100 ligne chacun ? non merci.
Sujet clos
Aller à