החלפת Class באמצעות JavaScript ו Data Attributes

בפוסט קצר זה נראה כיצד להחליף CSS Classes של אלמנטים באמצעות JavaScript ו-data attributes. שיטה זו שימושית ליצירת אלמנטים אינטראקטיביים בדף האינטרנט שלכם מבלי להוסיף לוגיקת JavaScript מורכבת.

הגדרת HTML בסיסית

נסתכל ראשית על מבנה HTML בסיסי. נשתמש בכפתור כדי להחליף (toggle) מחלקה (class) של אלמנט היעד.

<button data-toggle-target="#content" data-toggle-class="highlight">Toggle Highlight</button>
<div id="content">This is the content to be toggled.</div>

קוד ה- JavaScript להחלפת ה- Class

נוסיף לאחר מכן JavaScript שיטפל באירוע הלחיצה על הכפתור ויחליף את class שהוגדר באלמנט היעד.

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[data-toggle-target]').forEach(button => {
        button.addEventListener('click', () => {
            const targetSelector = button.getAttribute('data-toggle-target');
            const className = button.getAttribute('data-toggle-class');
            document.querySelectorAll(targetSelector).forEach(target => {
                target.classList.toggle(className);
            });
        });
    });
});

עיצוב עם CSS

נוסיף לדוגמה זו מעט CSS כדי לראות את ההשפעה של החלפת ה- class:

.highlight {
    background-color: darkolivegreen;
}

הנה דוגמה חיה:

מספר יעדים

ניתן גם להחליף מחלקות (classes) על מספר אלמנטים במקביל. עדכנו את ה-HTML כדי לראות זאת בפעולה:

<button data-toggle-target=".content" data-toggle-class="highlight">Toggle Highlight on All</button>
<div class="content">Content 1</div>
<div class="content">Content 2</div>

ה-HTML כולל כפתורים עם תכונות data-toggle-target ו-data-toggle-class. ה-JavaScript שכתבנו בוחר את כל האלמנטים עם data-toggle-target ומוסיף Event Listener ללחיצה על הכפתור. כאשר לוחצים על כפתור הוא מחליף את ה- class באלמנטים.

הנה דוגמה חיה:

סיכום

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