Si vous apprenez une partie importante de la philosophie de l'architecture frontale de cette série, apprenez celle-ci. Changez simplement de classe. Dans ce screencast, nous commençons à descendre un grand trou du lapin de JavaScript uniquement pour nous arrêter, nous attraper et utiliser CSS à la place. Lorsque vous changez quelque chose visuellement, c'est le domaine du CSS. Non seulement il est bon dans ce domaine, mais il est généralement plus performant et maintient une saine «séparation des préoccupations» qui en fait un site Web sain à long terme.
Après avoir repris nos esprits, nous avons simplement fini par échanger 1) le texte du bouton 2) un data-stateattribut sur le conteneur.
$(".bigger").on("click", function() ( var el = $(this); var module = el.parent(); // Swap expanded state module.attr("data-state") == "expanded" ? module.attr("data-state", "") : module.attr("data-state", "expanded"); // Swap button text. el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); ));Voici où nous nous sommes retrouvés:
Voir le Pen quFCo de Chris Coyier (@chriscoyier) sur CodePen
Oui, cette vidéo (et ce sentiment) est "juste changer de classe!", Et nous changeons un translate = "no"> data- * attributs juste parce que je les aime. Je pense à eux comme des classes espacées de noms, ou des classes avec des valeurs. Sans doute plus utiles en CSS que les classes et elles ont exactement la même valeur de spécificité.
Est-ce que ? /: la syntaxe semble bizarre? Si tel est le cas, il s'agit d'un opérateur ternaire (ou «conditionnel»).
La première ligne est un test, la ligne suivante (ou le bit après le?) Est ce qui se passe si ce test est vrai, la dernière ligne (ou le bit après le :) est ce qui se passe si ce test est faux. Peut-être que cela aide:
// The boolean (true/false) test module.attr("data-state") == "expanded" // Do this if the test is true ? module.attr("data-state", "") // Do this is the test if false : module.attr("data-state", "expanded");Ne les évitez pas simplement parce qu'ils ont l'air bizarres, ils peuvent être plus efficaces (et finalement lire aussi bien, tant que vous ne devenez pas fou) que la logique if / else.
Doug Neiner a un bon article sur l'idée de «juste changer de classe». Les classes ont tellement de pouvoir en CSS. Vous pouvez cacher / montrer des choses, déplacer des choses, changer l'apparence des choses, déclencher des animations… le ciel est la limite. Et plus vous appliquez la classe en haut de l '«arbre» (DOM), plus vous avez de puissance en cascade. Un changement de classe sur le corps signifie que vous pouvez contrôler n'importe quoi sur la page entière avec une seule classe. Et le tout avec une très petite quantité de JavaScript.
Une fois que vous aurez accepté cela, vous serez un développeur plus heureux.