Aidez à comprendre le bouton de validation / désactivation du bouton jQuery

La première partie à comprendre est la résolution des symboles. Javacript prend en charge à la fois la notation de points et la notation de bracket.

Envisagez d'ouvrir une nouvelle fenêtre.

 window.open() 

Il s'agit de la notation des points en action. Vous dites à l'interprète que "open" peut être trouvé sur "window". Mais il y a une autre façon de le faire

 window['open']() 

Même chose, mais avec une notation de parenthèse. Au lieu d'utiliser le nom du symbole directement, nous utilisons plutôt un littéral de chaîne. Ce que cela signifie, c'est qu'en utilisant la notation de bracket pour la résolution des symboles, nous pouvons le faire de manière dynamique, car nous pouvons choisir ou créer des chaînes à la volée, ce qui est exactement ce que fait cet extrait.

 this.buttonNext[n ? 'bind' : 'unbind'](...); 

Est analogue à

 if ( n ) { this.buttonNext.bind(...); } else { this.buttonNext.unbind(...); } 

Si vous ne reconnaissez pas la syntaxe:: c'est l' opérateur conditionnel , ou l'expression conditionnelle

 [expression] ? [valueIfTrue] : [valueIfFalse] 

Il s'agit souvent d'un «opérateur ternaire» souvent appelé à tort, alors qu'il s'agit simplement d' un opérateur ternaire (un opérateur avec trois opérandes). La raison en est parce que javascript (et la plupart des langues) est le seul opérateur ternaire, de sorte que la description coule habituellement.

Est ce que ça aide? Est-ce qu'il y a autre chose dont vous avez besoin d'être éclairci?

Ces lignes sont au milieu d'une méthode qui prend deux paramètres.

 n // whether to show the next button p // whether to show the previous button 

L'un de ces boutons peut être nul ou indéfini, ce qui fait que jCarousel regarde d'autres facteurs, que le carrousel soit ou non verrouillé.

Regarde ça:

  lock: function() { this.locked = true; this.buttons(); }, unlock: function() { this.locked = false; this.buttons(); } 

Si vous regardez quelques lignes à partir de vos deux lignes, vous verrez que this.locked est pris en compte pour le réglage de n et p lorsqu'ils ne sont pas transmis comme vrai.

Allumez une des lignes un peu:

 this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); bindMethod = n ? "bind" : "unbind"; // bind if n is true; otherwise unbind this.options.buttonNextEvent // defaults to "click", can be changed in the options this.funcNext // function() { self.next(); }; // self is a local available to the closure changeClass = n ? "removeClass" : "addClass" // same as above this.className("jcarousel-next-disabled") // adds -vertical or -horizontal to the class toDisable = !n // Effectively 

Ainsi, une façon de travailler pourrait être:

 this.buttonNext.bind("click", function() { self.next(); }).removeClass("jcarousel-next-disabled-horizontal").attr("disabled", false); 

Et comme l'a souligné, JavaScript prend en charge la notation de bracket et de symbole. Les deux suivants sont identiques:

 xy x["y"] 

Notez que la notation du support est un peu plus flexible:

 x.omg-omg // Illegal x["omg-omg"] // Legal 

Notez également que les méthodes ne sont que la recherche de propriété plus l'invocation. Les deux suivants sont identiques:

 x.omg() x["omg"]() 

Ce qui signifie que vous pouvez également faire ceci:

 x[someVariable]() 

Tada! J'espère que ça m'a aidé.

 [n ? 'bind' : 'unbind'] 

Une déclaration if, qui peut être réécrite comme

 if (n) // if n is true { 'bind'; } else { 'unbind'; } 

Donc, si n est vrai, cela évaluerait comme ça

 this.buttonNext.bind((this.options.buttonNextEvent, this.funcNext)) 

Parce que la notation [] est la même que celle. notation.

 buttonNext[bind] is the same as buttonNext.bind 

Pour résumer ce que vous avez posté, il vérifie les états des variables (n et p) qui détiennent l'état du bouton. Si elle est activée, alors elle est désactivée, elle ajoute les classes désactivées, etc. Si elle est désactivée, elle la définit comme activée et supprime la classe désactivée.

L'opération conditionnelle

 n ? 'bind' : 'unbind' 

Vous obtient la chaîne 'bind' ou 'unbind', en passant cette chaîne à l'opérateur [] vous obtient soit la méthode jQuery bind ou unbind. Suite à ce résultat, le () invoque la méthode. En effet, cette première partie est comme:

 if (n) { this.buttonNext.bind(this.options.buttonNextEvent, this.funcNext); } else { this.buttonNext.unbind(this.options.buttonNextEvent, this.funcNext); } if (p) { this.buttonPrev.bind(this.options.buttonPrevEvent, this.funcPrev); } else { this.buttonPrev.unbind(this.options.buttonPrevEvent, this.funcPrev); } 

La méthode bind et unbind renvoie le jeu jQuery sur lequel ils ont été invoqués. Dans ce cas, ils renverront this.buttonNext et this.buttonPrev, respectivement. Après cela avec un autre opérateur [] et en passant par cet opérateur, la chaîne 'removeClass' ou 'addClass' vous obtient la méthode removeClass ou addClass jQuery. En effet, vous avez maintenant ceci:

 if (n) { this.buttonNext.bind(this.options.buttonNextEvent, this.funcNext); this.buttonNext.removeClass(this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); } else { this.buttonNext.unbind(this.options.buttonNextEvent, this.funcNext); this.buttonNext.addClass(this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); } if (p) { this.buttonPrev.bind(this.options.buttonPrevEvent, this.funcPrev); this.buttonPrev.removeClass(this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true); } else { this.buttonPrev.unbind(this.options.buttonPrevEvent, this.funcPrev); this.buttonPrev.addClass(this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true); } 

Ces deux lignes vérifient s'il y a des éléments "suivants" ou "prev" à afficher et active / désactive les boutons en conséquence en ajoutant le jarousel désactivé-désactivé (activé) et en définissant l'attr invalide sur true / false.

Ok gars, j'aimerais apporter ma part sur ce sujet et vous parler de la manière la plus simple de désactiver le bouton de dialogue cliqué. Voici:

  $ ("# Dialogue-selector"). Dialogue ({
     Titre: "Dialog",
     // Autres options
     boutons: {
         "Ок": function (e) {
             $ (E.currentTarget) .attr ("désactivé", vrai);
         }
     }
 }); 

IMHO, ce code est totalement illisible comme vous le seriez d'accord.

Comme Peter l'a écrit, vous devez savoir que la méthode JavaScript peut être appelée en utilisant la notation DOT ou la notation BRACKET.

De plus, jQuery prend en charge le chaînage.

Une fois que vous connaissez ces deux choses, voici comment le code se décompose.

 this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); 

La ligne ci-dessus fait trois choses. Binds / Unbinds event, ajoute / supprime la classe et active / désactive le 'buttonNext'.

1. Etape Bind / unbind

    this.buttonNext[n ? 'bind' :'unbind'] (this.options.buttonNextEvent, this.funcNext); 

   Vous appelez le 'bind' ou 'unbind' selon que n soit true ou false . Plus important encore, l'appel de la méthode de bind renverra this.buttonNext .

2. Étape addClass / removeClass

    this.buttonNext[n ? 'removeClass' : 'addClass'] (this.className('jcarousel-next-disabled')) 

   Encore une fois, en fonction de n , il appellera la addClass ou removeClass passant le nom de classe approprié. Vous obtenez le même objet this.buttonNext retour.

3. Enfin, activez / désactivez l'étape de bouton

    this.buttonNext.attr('disabled', n ? false : true); 

   Désactivation / activation du bouton en fonction de si n est true ou false .

Même si j'aime le chaînage, je pense que le chaînage a été mal utilisé dans ce code.