Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

JQuery टॉगल का उपयोग करना ()

JQuery toggle() विधि को लाइटस्विच के रूप में माना जा सकता है। जब कॉल किया जाता है, तो यह चयनित तत्वों को "चालू" या "बंद" करता है। यही है, यह उपयोगकर्ता को तत्वों को प्रस्तुत करने या उन्हें छिपाने के बीच टॉगल करता है। निम्नलिखित उदाहरण में, हम यह पता लगाएंगे कि toggle() . का उपयोग कैसे किया जाता है बटन क्लिक करने पर टेक्स्ट छिपाने और प्रदर्शित करने के लिए।

jQuery टॉगल क्या है ()?

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 फ़ाइल एक बटन और दो पैराग्राफ टैग प्रदान कर रही है। आईडी "छिपाने" के साथ

टैग की शैली विशेषता पर ध्यान दें। प्रदर्शन को किसी पर भी सेट करने से वह अनुच्छेद तत्व प्रदर्शन से छिप जाएगा।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

JQuery टॉगल का उपयोग करना ()

हमारी एचटीएमएल फाइल ठीक वैसे ही प्रस्तुत कर रही है जैसा हमने अनुमान लगाया था। अब छिपे हुए

टैग को दिखाने के लिए jQuery के टॉगल का उपयोग करते हैं। इस उदाहरण में, हम अपने jQuery को HTML फ़ाइल के अंदर शामिल करेंगे। ऐसा करने के लिए, हमें अपने jQuery को

  1. जावास्क्रिप्ट का उपयोग करके बूलियन को कैसे टॉगल करें?

    जावास्क्रिप्ट का उपयोग करके बूलियन को टॉगल करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&

  1. जावास्क्रिप्ट आयात में '{ }' का उपयोग करना?

    जावास्क्रिप्ट आयात में {} का उपयोग करने वाला कोड निम्नलिखित है - उदाहरण दस्तावेज़ बॉडी { फॉन्ट-फ़ैमिली:सेगो यूआई, ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } .result {फ़ॉन्ट-आकार:18पीएक्स; फ़ॉन्ट-वजन:500; रंग:रेबेकापर्पल; }जावास्क्रिप्ट आयात में { } का उपयोग करनायहां क्लिक करेंआयातित फ़ंक्शन को निष्पाद

  1. JQuery का उपयोग करके कंटेनर div में छवि को कैसे खींचें/पैन करें?

    मूसडाउन, माउसअप और माउसमूव जैसी घटनाओं की मदद से, हम छवि का अनुवाद कर सकते हैं जिससे ड्रैग इफेक्ट पैदा होता है। निम्नलिखित उदाहरण दर्शाता है कि कैसे एक छवि को jQuery का उपयोग करके स्थानांतरित किया जा सकता है। उदाहरण <!DOCTYPE html> <html> <head> <style> #parent{