कभी-कभी एक डेवलपर को उस बटन की आईडी जाननी पड़ती है जिसे उपयोगकर्ता ने वेबपेज पर आगे की कार्रवाई तय करने के लिए क्लिक किया है। जैसा कि आप इस राइट-अप में देखेंगे, यह वैनिला जावास्क्रिप्ट और jQuery दोनों के माध्यम से किया जा सकता है। तो, चलिए शुरू करते हैं:
सबसे पहले, हम एक साधारण HTML वेबपेज बनाएंगे जिसमें पेज के केंद्र में दो बटन होंगे:
डॉक्टरेट एचटीएमएल >
< एचटीएमएल >
< तन >
< केंद्र >
< डिव शैली = 'मार्जिन-टॉप: 50px;' >
< एच 2 > निम्न में से किसी एक बटन पर क्लिक करें एच 2 >
< बटन पहचान = 'बटन_ऑन' शैली = 'चौड़ाई: 100पीएक्स; ऊंचाई:40पीएक्स; मार्जिन-दाएं: 10पीएक्स;' > 1 बटन >
< बटन पहचान = 'बटन_दो' शैली = 'चौड़ाई: 100px; ऊंचाई: 40px;' > दो बटन >
डिव >
केंद्र >
तन >
एचटीएमएल >
जावास्क्रिप्ट का उपयोग करके क्लिक किए गए बटन की आईडी कैसे प्राप्त करें?
हम कई अलग-अलग तरीकों से जावास्क्रिप्ट का उपयोग करके क्लिक किए गए बटन की आईडी प्राप्त कर सकते हैं। हमारी पहली विधि में, हम सभी बटन टैग की नोडलिस्ट प्राप्त करेंगे और उन्हें एक वेरिएबल के अंदर स्टोर करेंगे। फिर हम क्लिक किए गए बटन की आईडी प्राप्त करने के लिए नोडलिस्ट पर पुनरावृति करेंगे:
< लिखी हुई कहानी >
वर बटन = document.getElementsByTagName ( 'बटन' ) ;
के लिये ( होने देना सूचकांक = 0 ; अनुक्रमणिका < बटन। लंबाई; अनुक्रमणिका++ ) {
बटन [ अनुक्रमणिका ] .ऑनक्लिक = समारोह ( ) {
चेतावनी ( this.id ) ;
}
}
लिखी हुई कहानी >
हम प्रत्येक बटन को के साथ भी सेट-अप कर सकते हैं क्लिक पर घटना व्यक्तिगत रूप से:
डॉक्टरेट एचटीएमएल >
< एचटीएमएल >
< तन >
< केंद्र >
< डिव शैली = 'मार्जिन-टॉप: 50px;' >
< एच 2 > निम्न में से किसी एक बटन पर क्लिक करें एच 2 >
< बटन पहचान = 'बटन_ऑन' शैली = 'चौड़ाई: 100पीएक्स; ऊंचाई:40पीएक्स; मार्जिन-दाएं: 10पीएक्स;' क्लिक पर = 'अलर्ट आईडी (this.id)' > 1 बटन >
< बटन पहचान = 'बटन_दो' शैली = 'चौड़ाई: 100px; ऊंचाई: 40px;' क्लिक पर = 'अलर्ट आईडी (this.id)' > दो बटन >
डिव >
केंद्र >
तन >
< लिखी हुई कहानी >
समारोह चेतावनी आईडी ( पहचान ) {
चेतावनी ( पहचान )
}
लिखी हुई कहानी >
एचटीएमएल >
JQuery का उपयोग करके क्लिक किए गए बटन की आईडी कैसे प्राप्त करें?
jQuery में कई अलग-अलग विधियां भी हैं जिनका उपयोग क्लिक किए गए बटन की आईडी प्राप्त करने के लिए किया जा सकता है। हम से शुरू करेंगे क्लिक करें () विधि जो चयनकर्ता पर लागू होती है और वैकल्पिक तर्क के रूप में फ़ंक्शन नाम लेती है:
डॉक्टरेट एचटीएमएल >
< एचटीएमएल >
< तन >
< केंद्र >
< डिव शैली = 'मार्जिन-टॉप: 50px;' >
< एच 2 > निम्न में से किसी एक बटन पर क्लिक करें एच 2 >
< बटन पहचान = 'बटन_ऑन' शैली = 'चौड़ाई: 100पीएक्स; ऊंचाई:40पीएक्स; मार्जिन-दाएं: 10पीएक्स;' क्लिक पर = 'अलर्ट आईडी (this.id)' > 1 बटन >
< बटन पहचान = 'बटन_दो' शैली = 'चौड़ाई: 100px; ऊंचाई: 40px;' क्लिक पर = 'अलर्ट आईडी (this.id)' > दो बटन >
डिव >
केंद्र >
तन >
< लिखी हुई कहानी >
$ ( 'बटन' ) क्लिक करें ( चेतावनी आईडी ( $ ( यह ) .attr ( 'पहचान' ) ) ) ;
समारोह चेतावनी आईडी ( पहचान ) {
चेतावनी ( पहचान )
}
लिखी हुई कहानी >
एचटीएमएल >
हम का भी उपयोग कर सकते हैं पर() इवेंट हैंडलर को तत्वों से जोड़ने की विधि। पर() विधि कुछ अन्य वैकल्पिक तर्कों के साथ तर्क के रूप में कम से कम एक घटना लेती है:
< एचटीएमएल >
< तन >
< केंद्र >
< डिव शैली = 'मार्जिन-टॉप: 50px;' >
< एच 2 > निम्न में से किसी एक बटन पर क्लिक करें एच 2 >
< बटन पहचान = 'बटन_ऑन' शैली = 'चौड़ाई: 100पीएक्स; ऊंचाई:40पीएक्स; मार्जिन-दाएं: 10पीएक्स;' क्लिक पर = 'अलर्ट आईडी (this.id)' > 1 बटन >
< बटन पहचान = 'बटन_दो' शैली = 'चौड़ाई: 100 पीएक्स; ऊंचाई: 40 पीएक्स;' क्लिक पर = 'अलर्ट आईडी (this.id)' > दो बटन >
डिव >
केंद्र >
तन >
< लिखी हुई कहानी >
$ ( 'बटन' ) ।पर ( 'क्लिक' , अलर्ट आईडी ( $ ( यह ) .attr ( 'पहचान' ) ) ) ;
समारोह चेतावनी आईडी ( पहचान ) {
चेतावनी ( पहचान )
}
लिखी हुई कहानी >
एचटीएमएल >
निष्कर्ष
क्लिक किए गए बटन की आईडी को सादे जावास्क्रिप्ट और jQuery दोनों के माध्यम से एक्सेस किया जा सकता है। हमने ऐसी चार विधियों पर चर्चा की और इस लेख में गहन विवरण और प्रासंगिक उदाहरण दिए।