שקופיות JavaScript עם פונקציות

• אַפּרִיל 30, 2024

במאמרים קודמים יצרנו ועשינו כיוונון עדין על הצגת שקופיות JavaScript מאוד פשוטה. הצגת שקופיות זו פונקציונאלית לחלוטין, ואף מציגה משהו שמתאים לאנשים שאין להם JavaScript, אך ברצוני שהמוזיאון של התמונה שאני מציג כרגע ייראה שונה מהתמונות הממוזערות האחרות. הסתפקתי בשימוש במזהה CSS בשם "זרם" שהפך את התמונות לשקופות למחצה והוספתי גבול אדום דק לתמונה הממוזערת שנבחרה. במאמר האחרון שלי קיבלתי התנהגות זו עבור התמונה הממוזערת שנבחרה בתחילה, אך כשבחרתי תמונה ממוזערת חדשה, התמונה הממוזערת החדשה לא השתנתה והתמונה הממוזערת הראשונית שמרה על הסטיילינג שנבחר.

בגירסה הקודמת של הצגת השקופיות שלי, כאשר משתמש לוחץ על תמונה ממוזערת, מוצגות התמונות הגדולות המשויכות. מה שאני רוצה לעשות זה לשנות את התמונה הגדולה, להגדיר את התמונה הממוזערת של התמונה שנבחרה קודם לכן לחזור לקדמותה ולבצע הצגת תמונה ממוזערת זו עם הסגנון המיוחד לתמונה שנבחרה. מכיוון שעכשיו אני עושה מספר דברים כאשר לוחצים על התמונה הממוזערת, עברתי לשים את כל הקוד שלי בתכונה onClick של img תווית לשימוש בפונקציה. פונקציות JavaScript בדרך כלל נכנסות ל- ראש קטע של HTML כך שהם יהיו נטענים ומוכנים כאשר גוף העמוד נטען. ניתן להכניס אותם ישירות בין תסריט תגיות או לשים וקובץ וכלול. עבור תוכניות קצרות, או כשאני מקודד באופן פעיל, קל לי להכניס את הקוד ישירות לדף כמו שעשיתי כאן.

יכולתי להשתמש בפונקציה עבור כל תמונה ממוזערת אבל מכיוון שכל מה שמשתנה ממוזערת לתמונה ממוזערת הוא שם התמונה ומזהה התמונה הממוזערת (והשתמשתי בשם התמונה למזהה), כתבתי פונקציה אחת שצילמה את id כטיעון והשתמש בזה כדי ליצור את שם התמונה המתאים על ידי הוספת אליו ".jpg". התקשרתי לתפקוד שלי displayLarge.

פונקציה displayLarge (מזהה) {
// לשנות את התמונה הגדולה
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// להחזיר את סגנון התמונה הממוזערת הקודמת לברירת המחדל
document.getElementById ("נוכחי"). id = oldID;
// רשום את המזהה לפני שנשנה אותו
oldID = id
// סמן את התמונה הממוזערת כזרם עם הסגנון הנוכחי
document.getElementById (id) .id = "נוכחי";
}

על מנת שפונקציה זו תעבוד בפעם הראשונה, הייתי חייבת לתת גם הגדרה ראשונית עבור ישן, המשתנה בו אני משתמש כדי לזכור את המזהה המקורי של התמונה הממוזערת שנבחרה כעת. כל הקוד הזה מופיע בחלק הראשי של דף האינטרנט, כך שהוא נטען לפני העמסת העמוד.

לבסוף שיניתי את ה- HTML של התמונות הממוזערות כדי לקרוא לתפקוד שלי. ה- HTML למצגת השקופיות שלי נראה עכשיו כך:











תוכל לראות דוגמא עובדת לקוד זה כאן.

הוראות וידאו: javascript callback functions tutorial (אַפּרִיל 2024).