Se você aprender alguma parte importante da filosofia de arquitetura de front end com esta série, aprenda esta. Basta mudar de classe. Neste screencast, começamos a percorrer uma grande toca de coelho do JavaScript apenas para parar, nos capturar e usar CSS em seu lugar. Quando você está mudando algo visualmente, esse é o domínio do CSS. Não só é bom nisso, mas também tem mais desempenho e mantém uma “separação de interesses” saudável que contribui para um site saudável a longo prazo.
Depois que recobramos o juízo, simplesmente acabamos trocando 1) o texto do botão 2) um data-stateatributo no contêiner.
$(".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")); ));É aqui que terminamos:
Veja o Pen quFCo de Chris Coyier (@chriscoyier) no CodePen
Sim, este vídeo (e sentimento) é “apenas mude de classe!”, E estamos mudando os atributos translate = "no"> data- * apenas porque eu gosto deles. Eu penso neles como classes com espaçamento de nome, ou classes com valores. Provavelmente mais útil em CSS do que classes e eles têm exatamente o mesmo valor de especificidade.
Isso? /: a sintaxe parece estranha? Nesse caso, é conhecido como operador ternário (ou "condicional").
A primeira linha é um teste, a próxima linha (ou o bit após o?) É o que acontece se esse teste for verdadeiro, a última linha (ou o bit após o :) é o que acontece se o teste for falso. Talvez isso ajude:
// 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");Não os evite só porque parecem estranhos, eles podem ser mais eficientes (e, no final das contas, também podem ser lidos, desde que você não enlouqueça) como se / outra lógica.
Doug Neiner tem um bom artigo sobre a ideia de “mudar de classe”. As classes têm muito poder em CSS. Você pode ocultar / mostrar coisas, mover coisas, mudar a aparência das coisas, acionar animações ... o céu é o limite. E quanto mais alto na “árvore” (DOM) você aplica a classe, mais poder de cascata você tem. Uma mudança de classe no corpo significa que você pode controlar qualquer coisa na página inteira com uma única classe. E tudo com uma quantidade muito pequena de JavaScript.
Depois de comprar isso, você será um desenvolvedor mais feliz.