Jos opit jotain suurta etupään arkkitehtuurifilosofiaa tästä sarjasta, opi tämä. Vaihda vain luokkaa. Tässä kuvaruudussa alamme laskea JavaScriptiä suuremmasta kaninreiästä vain pysähtyäkseen, saamaan itsemme ja käyttämään CSS: ää. Kun muutat jotain visuaalisesti, se on CSS: n toimialue. Paitsi että se on siinä hyvä, se on tyypillisesti suorituskykyisempi ja ylläpitää terveellistä "huolenaiheiden erottamista", mikä tekee terveellisestä verkkosivustosta pitkän aikavälin.
Kun olemme tottuneet järkkemme, vaihdoimme yksinkertaisesti 1) painikkeen tekstin 2) data-stateattribuutin säiliöön.
$(".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")); ));Tässä päädyimme:
Katso Chris Coyierin (@chriscoyier) Pen quFCo -koodia CodePenistä
Kyllä, tämä video (ja mielipide) on "vain vaihda luokkaa!", Ja muutamme translate = "no"> data- * -attribuutteja vain siksi, että pidän niistä. Ajattelen heitä kuten nimivälin luokkia tai luokkia, joilla on arvoja. Epäilemättä hyödyllisempi CSS: ssä kuin luokissa ja niillä on täsmälleen sama spesifisyysarvo.
Tekee sitä ? /: syntaksi näyttää oudolta? Jos näin on, se tunnetaan kolmiosaisena (tai "ehdollisena") operaattorina.
Ensimmäinen rivi on testi, seuraava rivi (tai bitti?: N jälkeen) tapahtuu, jos kyseinen testi on totta, viimeinen rivi (tai bitti :): n jälkeen tapahtuu, jos testi on väärä. Ehkä tämä auttaa:
// 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");Älä vältä niitä vain siksi, että ne näyttävät oudolta, ne voivat olla tehokkaampia (ja viime kädessä lukea yhtä hyvin, kunhan et mene pähkinöitä) ikään kuin / muuta logiikkaa.
Doug Neinerillä on hyvä artikkeli "vaihda luokkaa" -ideasta. Luokilla on niin paljon voimaa CSS: ssä. Voit piilottaa / näyttää asioita, siirtää asioita, muuttaa esineiden ulkonäköä, käynnistää animaatioita ... taivas on raja. Ja mitä korkeammalla puussa (DOM) käytät luokkaa, sitä enemmän kaskadivoimaa sinulla on. Rungon luokan muutos tarkoittaa, että voit hallita mitä tahansa koko sivulla yhdellä luokalla. Ja kaikilla on hyvin pieni määrä JavaScriptiä.
Kun ostat tähän, olet onnellisempi kehittäjä.