यदि आप इस श्रृंखला से किसी भी प्रमुख बिट फ्रंट आर्किटेक्चर दर्शन को सीखते हैं, तो यह सीखें। बस कक्षाएं बदलें। इस पेंचकस में हम केवल रोकने, स्वयं को पकड़ने और इसके बजाय CSS का उपयोग करने के लिए जावास्क्रिप्ट का एक प्रमुख खरगोश छेद नीचे जाना शुरू करते हैं। जब आप कुछ नेत्रहीन बदल रहे हैं, तो वह सीएसएस का डोमेन है। न केवल यह अच्छा है, यह आमतौर पर अधिक प्रदर्शन करने वाला है और एक स्वस्थ "चिंताओं को अलग करने" को बनाए रखता है जो एक लंबी अवधि के लिए स्वस्थ वेबसाइट बनाता है।
हमारे होश में आने के बाद, हमने बस 1) बटन पाठ 2) data-stateकंटेनर पर एक विशेषता स्वैपिंग को समाप्त कर दिया ।
$(".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")); ));यहाँ हम कहाँ समाप्त हुए:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन क्वेंको देखें
हां, यह वीडियो (और भावना) "बस परिवर्तन कक्षाएं हैं!", और हम एक अनुवाद बदल रहे हैं = "नहीं"> डेटा- * केवल इसलिए कि मैं उन्हें पसंद करता हूं। मैं उनके बारे में सोचता हूं जैसे नाम-स्थान वाली कक्षाएं, या मूल्य वाले वर्ग। सीएसएस में कक्षाओं की तुलना में अधिक उपयोगी है और उनकी सटीक विशिष्टता भी है।
क्या वो ? /: वाक्यविन्यास अजीब लगता है? यदि हां, तो यह एक टर्नरी (या "सशर्त") ऑपरेटर के रूप में जाना जाता है।
पहली पंक्ति एक परीक्षण है, अगली पंक्ति (या बिट के बाद?) क्या होता है यदि उस परीक्षण में यदि सत्य है, तो अंतिम पंक्ति (या बिट के बाद :) यदि परीक्षण गलत है तो क्या होता है। शायद इससे मदद मिलती है:
// 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");उन्हें सिर्फ इसलिए टालें नहीं क्योंकि वे अजीब दिखते हैं, वे अधिक कुशल हो सकते हैं (और अंत में सिर्फ उतना ही पढ़ सकते हैं, जब तक कि आप पागल न हों) जैसे कि / और तर्क।
डौग नेइनर के पास "बस परिवर्तन कक्षाएं" विचार पर एक अच्छा लेख है। CSS में classes में बहुत पॉवर है। आप चीजों को छिपा सकते हैं / दिखा सकते हैं, चीजों को स्थानांतरित कर सकते हैं, चीजों की उपस्थिति बदल सकते हैं, एनिमेशन को ट्रिगर कर सकते हैं ... आकाश की सीमा है। और उच्च "ट्री" (DOM) में आप क्लास को लागू करते हैं, आपके पास जितनी अधिक कैस्केडिंग शक्ति होती है। शरीर पर एक वर्ग परिवर्तन का मतलब है कि आप एक ही वर्ग के साथ पूरे पृष्ठ पर कुछ भी नियंत्रित कर सकते हैं। और सभी जावास्क्रिप्ट की एक बहुत छोटी राशि के साथ।
एक बार जब आप इसे खरीद लेंगे तो आप एक खुशहाल डेवलपर बन जाएंगे।