בדוק אם ל-event.target יש מחלקה ספציפית באמצעות JavaScript

Bdwq M L Event Target Ys Mhlqh Spzypyt B Mz Wt Javascript



לפעמים, המתכנת עשוי לרצות לבדוק אם האלמנט שהפעיל את האירוע (ה-event.target) תואם לבורר שאכפת לו ממנו. איך לעשות את זה? JavaScript מציע כמה שיטות מוגדרות מראש כגון ' מכיל() ' ו' התאמות() ” שיטות לזהות את הבורר הספציפי באירוע יעד.

פוסט זה יסביר את השיטות לקבוע אם ל-event.target יש מחלקה מסוימת או לא באמצעות JavaScript.

כיצד לבדוק אם ל-event.target יש מחלקה ספציפית באמצעות JavaScript?

כדי לקבוע אם ל-event.target יש מחלקה מסוימת, השתמש בשיטות המוגדרות מראש של JavaScript הבאות:





בואו נראה כיצד השיטות הללו פועלות לקביעת מחלקה ב-event.target.



שיטה 1: בדוק אם ל-event.target יש מחלקה ספציפית באמצעות שיטה contains()

כדי לקבוע אם אלמנט שייך למחלקה מסוימת, השתמש ב-' מכיל() שיטת ה' classList ' חפץ. השיטה contains() משמשת כדי לזהות אם פריט שצוין קיים באוסף. התפוקות שלו' נָכוֹן 'אם הפריט קיים, אחרת, הוא נותן ' שֶׁקֶר '. זוהי הדרך היעילה ביותר לקביעת מחלקה של אלמנט.



תחביר



עקוב אחר התחביר הנתון להלן כדי לקבוע אם ל-event.target יש מחלקה ספציפית או לא באמצעות המתודה contains():

מִקרֶה. יַעַד . classList . מכיל ( 'שם-כיתה' )

בתחביר לעיל:



  • ' event.target ” הוא אירוע מופעל שייבדק אם הוא מכיל את המחלקה הספציפית או לא.
  • ה ' שם כיתה ” מזהה את השם של מחלקת ה-CSS שהיא חלק מהאירוע המופעל.

ערך החזרה

זה מחזיר' נָכוֹן ' אם לאירוע המופעל יש את המחלקה שצוינה; אחרת, זה מחזיר ' שֶׁקֶר '.

דוגמא

ראשית, צור שלושה ' div ' רכיבים בקובץ HTML באמצעות ה-HTML

תָג:

< div מעמד = 'מרכז div div1Style' תְעוּדַת זֶהוּת = 'div1' > 1

< div מעמד = 'div div2Style' תְעוּדַת זֶהוּת = 'div2' > שתיים

< div מעמד = 'div div3Style' תְעוּדַת זֶהוּת = 'div3' > 3

div >

div >

div >

סגננו את האלמנטים באמצעות סגנון CSS. כדי לעשות זאת, צור מחלקת CSS ' .div ' עבור כל רכיבי ה-div:

. div {

ריפוד : 10 פיקסלים ;

גוֹבַה : 100 פיקסלים ;

רוֹחַב : 100 פיקסלים ;

שולים : 10 פיקסלים ;

}

ליצור ' .מֶרְכָּז ' מחלקה להגדרת האלמנטים במרכז הדף:

. מֶרְכָּז {

שולים : אוטומטי ;

}

כעת, לסטיילינג, כל div בנפרד יוצר עבורו שיעור CSS. עבור ה-div הראשון, הגדר את צבע הרקע ' אָדוֹם ' בתוך ה ' div1 Style ' מעמד:

. div1 Style

{

רקע כללי - צֶבַע : אָדוֹם ;

}

עבור ה-div השני, הגדר את צבע הרקע ' ורוד צנון ' משתמש ב ' rgba(194, 54, 77) 'קוד ב' div2Style ' מעמד:

. div2Style

{

רקע כללי - צֶבַע : rgb ( 194 , 54 , 77 ) ;

}

הגדר את צבע הרקע ' וָרוֹד ' של div שלישי על ידי יצירת ' div3Style ' מעמד:

. div3Style

{

רקע כללי - צֶבַע : וָרוֹד ;

}

לאחר הפעלת קוד ה-HTML לעיל, הפלט ייראה כך:

כעת, בקובץ JavaScript או ' תַסרִיט ', השתמש בקוד שסופק להלן כדי לבדוק אם ל-event.target יש מחלקה ספציפית או לא:

מסמך. addEventListener ( 'נְקִישָׁה' , פונקציה handleClick ( מִקרֶה ) {

איפה יש Class = מִקרֶה. יַעַד . classList . מכיל ( 'מֶרְכָּז' ) ;

עֵרָנִי ( 'div זה מכיל מחלקה 'מרכז': ' + hasClass ) ;

} ) ;

בקטע הקוד שלמעלה:

  • ראשית, צרף מאזין אירועים לאירוע קליק שיטפל בכל קליק על DOM.
  • לאחר מכן, בדוק אם לאירוע המופעל יש את המחלקה CSS ' מֶרְכָּז ' או לא בעזרת ה' classList.class() ' שיטה.

תְפוּקָה

ה-GIF שלמעלה מראה ש-div1 מכיל את ' מֶרְכָּז 'מעמד כפי שהוא מראה' נָכוֹן ', בעוד ש-div2 ו-div3 מציגים ' שֶׁקֶר ' בתיבת ההתראה, כלומר הם אינם מכילים את ' מֶרְכָּז ' מעמד.

שיטה 2: בדוק אם ל-event.target יש מחלקה ספציפית באמצעות שיטה matches()

שיטה נוספת מוגדרת מראש של JavaScript בשם ' התאמות() ' ניתן להשתמש כדי לבדוק אם מחלקה מסוימת שייכת לאלמנט או לאירוע. ה ' שם כיתה ” הוא הפרמטר היחיד הדרוש כדי לקבוע אם אלמנט או אירוע יעד כוללים מחלקה מסוימת או לא.

תחביר

התחביר הנתון להלן משמש עבור שיטת matches():

מִקרֶה. יַעַד . התאמות ( '.class-name' )

בתחביר לעיל,

  • ' event.target ” הוא אירוע מופעל שייבדק אם הוא מכיל את המחלקה הספציפית או לא.
  • ה ' שם כיתה ” מציין את השם של מחלקת ה-CSS שהיא חלק מהאירוע המופעל. שיטת matches() לוקחת את שם המחלקה יחד עם נקודה (.) שמציינת את המילה ' מעמד '.

ערך החזרה

אם לאירוע היעד יש מחלקה, הוא מחזיר ' נָכוֹן 'אחר,' שֶׁקֶר ' מוחזר.

דוגמא

בקובץ JavaScript או בתג סקריפט, השתמש בשורות הקוד שלהלן כדי לבדוק אם ל-event.target יש מחלקה ספציפית או לא באמצעות ' התאמות() ' שיטה:

מסמך. addEventListener ( 'נְקִישָׁה' , פונקציה handleClick ( מִקרֶה ) {

איפה יש Class = מִקרֶה. יַעַד . התאמות ( '.div3Style' ) ;

עֵרָנִי ( 'המחלקה של div זה תואמת את המחלקה 'div3Style': ' + hasClass ) ;

} ) ;

בשורות הקוד לעיל:

  • ראשית, צרף מאזין אירועים לאירוע קליק שיטפל בכל קליק על DOM.
  • לאחר מכן, בדוק אם ' div3Style ' מחלקת CSS קיימת באירוע שהופעל באמצעות ' התאמות() ' שיטה.
  • אם הוא קיים, ההתראה() מציגה הודעה עם ' נָכוֹן ', אחר' שֶׁקֶר '.

תְפוּקָה

ה-GIF שלמעלה מראה שרק div3 מכיל את ' div3Style 'מעמד כפי שהוא מראה' נָכוֹן '.

סיכום

כדי לקבוע אם לאירוע שהופעל יש מחלקה מסוימת, השתמש ב-JavaScript ' מכיל() שיטת ' או ה' התאמות() ' שיטה. עם זאת, השיטה contains() היא אחת הגישות השימושיות ביותר המשמשות לקביעת מחלקה של אלמנט. שתי השיטות מחזירות ' נָכוֹן 'אם לאירוע שהופעל יש מחלקה אחרת' שֶׁקֶר ' מוחזר. פוסט זה הסביר את השיטות לקבוע אם ל-event.target יש מחלקה מסוימת או לא באמצעות JavaScript.

אַחֵר

קטגוריה

רשום פופולרי

מהו טיפול בקבצים בתכנות C?

התקנת Git ב-PATH עם לקוח GitHub עבור Windows

Postgres הסבר עלות

Salesforce Apex – מחלקת מחרוזת

כיצד לנהל דפי וורדפרס

כיצד להשתמש בפונקציית ceil() ב-PHP?

פונקציית Sample() ב-R

התקנת MLflow: הוראות שלב אחר שלב על התקנת MLflow

דוגמאות של Python Tkinter

איך מפעילים מצב אולטרה קל בדיסקורד?

מהם מסמכי Elasticsearch?

כיצד למצוא את גודל הקובץ בתכנות C

כיצד להגדיר הזמנה ללא הגבלה לשרת דיסקורד?

5 שרתי הדיסקורד הטובים ביותר עבור Valheim שתוכלו להצטרף אליהם

כיצד לשנות שם של טבלה ב-MySQL באמצעות טרמינל?

כיצד להסיר תווים ממחרוזת ב- Arduino באמצעות הפונקציה String.remove()

ניתוח התקפות זיוף של ARP ב-Wireshark

כיצד לחבר את ארדואינו למחשב

כיצד לשנות צבע מציין מיקום קלט באמצעות CSS

סעיף SQL WHERE IN