jQuery toggle() मेथड को एक लाइटस्विच के रूप में सोचा जा सकता है। जब कॉल किया जाता है, तो यह चयनित एलिमेंट्स को "ऑन" या "ऑफ" टॉगल करता है। यानी, यह यूजर को एलिमेंट्स रेंडर करने या उन्हें छिपाने के बीच टॉगल करता है। निम्नलिखित उदाहरण में, हम पता लगाएंगे कि बटन क्लिक होने पर टेक्स्ट को छिपाने और प्रदर्शित करने के लिए toggle() का उपयोग कैसे करें।
jQuery toggle() क्या है?
jQuery toggle() मेथड वेब पेज पर चयनित एलिमेंट्स को प्रदर्शित या छुपाता है। जैसा कि शब्द से पता चलता है, यह मेथड एलिमेंट्स को "ऑन" या "ऑफ" टॉगल करने के लिए लाइटस्विच की तरह काम करता है। आमतौर पर toggle() मेथड को HTML बटन्स के साथ कॉल किया जाता है लेकिन वास्तव में इसे किसी भी चयनित एलिमेंट पर कॉल किया जा सकता है।
डिस्प्ले को "ऑन" और "ऑफ" के बीच टॉगल करने के अलावा, jQuery toggle() अवधि के लिए एक आर्गुमेंट स्वीकार करता है। अवधि आर्गुमेंट या तो संख्या या स्ट्रिंग डेटा प्रकार हो सकता है। अवधि आर्गुमेंट प्रदान करने से निर्दिष्ट समय तक चलने वाला एनिमेशन बनेगा।
jQuery toggle() एनिमेशन पूरा होने पर निष्पादित करने के लिए एक कॉलबैक फंक्शन भी स्वीकार करता है। याद रखें, एक कॉलबैक फंक्शन एक ऐसा फंक्शन है जिसे दूसरे फंक्शन में पास किया जाता है जिसे बाद में निष्पादित किया जाता है। यदि कोई आर्गुमेंट प्रदान नहीं किए जाते हैं, तो toggle() बस डिस्प्ले को "ऑन" या "ऑफ" टॉगल करेगा।
आइए बेसिक सिंटैक्स देखें और फिर उदाहरण कोड के साथ गहराई से जाएं। हमारा उदाहरण कोड फोटो और टेक्स्ट के बीच एनिमेशन टॉगलिंग को कवर करेगा।
toggle() jQuery सिंटैक्स
जैसा कि हमारे परिचय में कहा गया है, jQuery toggle() मेथड डिफ़ॉल्ट रूप से एक लाइटस्विच की तरह माना जा सकता है। एक बार क्लिक करने पर, यह चयनित एलिमेंट को डिस्प्ले में "ऑन" या "ऑफ" कर देता है। किसी भी jQuery मेथड की तरह, toggle() कॉल करने से पहले एक एलिमेंट का चयन किया जाना चाहिए।
आइए बिना आर्गुमेंट्स के toggle() का उपयोग करने का एक उदाहरण देखें। हमारी HTML फाइल से शुरू करते हुए:
<button> Click me </button> <p> Read me! </p> <p id="hide" style="display: none"> NO! Read ME! </p>
यहां से, हम देख सकते हैं कि हमारी HTML फाइल एक बटन और दो पैराग्राफ टैग रेंडर कर रही है। "hide" आईडी वाले <p> टैग के स्टाइल एट्रिब्यूट पर ध्यान दें। डिस्प्ले को none पर सेट करने से वह पैराग्राफ एलिमेंट डिस्प्ले से छिप जाएगा।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।
हमारी HTML फाइल बिल्कुल वैसी ही रेंडर हो रही है जैसा हमने अनुमान लगाया था। अब आइए छिपे हुए <p> टैग को दिखाने के लिए jQuery toggle का उपयोग करें। इस उदाहरण में, हम अपने jQuery को HTML फाइल के अंदर शामिल करेंगे। ऐसा करने के लिए, हमें अपने jQuery को <script> टैग में लपेटना होगा:
<script> $("button").click(function() { $("#hide").toggle(); }) </script>
सभी jQuery मेथड्स की तरह, हमें पहले एक एलिमेंट का चयन करना होगा। यहां, हमने बटन एलिमेंट का चयन किया है और click() मेथड कॉल किया है। click() मेथड अनिवार्य रूप से चयनित बटन पर एक इवेंट लिसनर अटैच करता है। एक बार बटन क्लिक होने पर, यह कॉलबैक फंक्शन को कॉल करता है और हमारे toggle() मेथड को निष्पादित करता है। jQuery click() के बारे में यहां और पढ़ें।
आइए हमारे कोड को एक्शन में देखते हैं।
बहुत बढ़िया! जब हमने बटन क्लिक किया, तो छिपा हुआ पैराग्राफ टैग प्रदर्शित हुआ। अब जब हम toggle() के सिंटैक्स से परिचित हैं, तो आइए एनिमेशन का उपयोग करने वाले उदाहरण को देखें।
jQuery toggle() एक्शन में
अब तक हमने देखा है कि toggle() डिस्प्ले में चयनित एलिमेंट्स को कैसे छिपा या उजागर कर सकता है। अब, आइए थोड़ा अधिक जटिल एनिमेशन उदाहरण देखें। चिंता न करें, हमने उपरोक्त सेक्शन में अधिकांश कॉन्सेप्ट्स पर चर्चा की है!
हमारे उदाहरण के लिए, हम एक बटन, एक इमेज, और <p> टैग में लिपटे कुछ टेक्स्ट रेंडर करने जा रहे हैं। हमारी HTML फाइल कुछ इस तरह दिखेगी:
<button> Click me </button> <img id="cat" src="https://images.pexels.com/photos/2256259/pexels-photo-2256259.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <p style="display: none"> Animation Complete </p>
फिर से ध्यान दें, हमारा पैराग्राफ एलिमेंट डिस्प्ले एट्रिब्यूट के मान के कारण छिपा होगा।
हमारा लकी किट्टी बटन के साथ रेंडर हो रहा है। चूंकि <p> टैग का स्टाइल एट्रिब्यूट "display: none" पर सेट है, टेक्स्ट छिपा हुआ है। अब, आइए बटन क्लिक होने पर फोटो को धीरे-धीरे छिपाने और टेक्स्ट दिखाने का प्रयास करें।
jQuery toggle में अवधि के लिए आर्गुमेंट या तो संख्या या स्ट्रिंग हो सकता है। यदि यह संख्या है, तो वह संख्या मिलीसेकंड दर्शाती है। स्ट्रिंग मान के लिए, toggle() "fast" या "slow" स्वीकार करता है, जो क्रमशः 600 या 200 मिलीसेकंड हैं।
उदाहरण के लिए, हम फोटो को धीरे-धीरे छिपाना चाहते थे, इसलिए हम toggle() के लिए अपने आर्गुमेंट के रूप में "slow" का उपयोग करेंगे। हमारे पहले उदाहरण की तरह, हम HTML फाइल के नीचे एक स्क्रिप्ट टैग में अपना jQuery लपेटेंगे।
<script> $('button').click(function() { $('#cat').toggle('slow', function() { $('p').toggle(); }) }) </script>
बटन का चयन करने और click() कॉल करने के बाद, हमारा पहला कॉलबैक फंक्शन हमारी कैट फोटो को छुपाता है। toggle() में स्ट्रिंग "slow" पास करके, हम एक अतिरिक्त कॉलबैक फंक्शन पास कर सकते हैं। यह कॉलबैक फंक्शन 200 मिलीसेकंड बीत जाने के बाद निष्पादित होता है।
एक बार हमारा "slow" समय समाप्त हो जाने पर, हम अपने पैराग्राफ एलिमेंट को "ऑन" टॉगल करेंगे। यह अब यूजर को <p> टैग दिखाएगा।
हम अपने आसान GIF के माध्यम से देख सकते हैं कि इमेज को छिपने में कुछ समय लगता है और तुरंत हमारे टेक्स्ट से बदल दी जाती है। toggle() के उपयोगों के संयोजन का उपयोग करके, हमने कोड की कुछ लाइनों के साथ एक डायनामिक एनिमेशन बनाया है।
निष्कर्ष
हमने चर्चा की कि jQuery toggle() क्या है और यह क्या करता है। फिर हमने कुछ उदाहरण कोड के साथ सिंटैक्स को देखा। बाद में, हमने जो सीखा उसे लेकर एक इमेज के साथ एक साधारण एनिमेशन बनाया।
अब जब आप jQuery toggle() से परिचित हैं, तो आप अपने अगले प्रोजेक्ट में एलिमेंट्स टॉगल करना शुरू कर सकते हैं। या बटन क्लिक होने पर इमेजेस में एनिमेशन भी जोड़ सकते हैं। यदि आप jQuery toggle() के बारे में आगे पढ़ना चाहते हैं, तो आधिकारिक डॉक्यूमेंटेशन पढ़ें। हैप्पी कोडिंग!
