Ich habe einen Kalender, der so aussieht und mit Tailwind CSS gestaltet wurde:

8 Mittwoch ist aktuell angeklickt, daher hat er einen rosa Hintergrund und einen rosa Schatten. Das 7. ist das zuvor angeklickte Element, deshalb hat es nur einen rosa Schatten (ich habe die rosa Hintergrundklasse entfernt, aber den rosa Schatten beibehalten).

Was ich möchte, ist, das zuletzt angeklickte Element beizubehalten, damit ich einen rosa Schatten hinzufügen kann, aber nur dem neuesten Element und nicht allen zuvor angeklickten Elementen.

So sieht mein JavaScript-Code aus:

//select needed elements from HTML
const calendarDates = document.querySelectorAll('.clickable')
const dateDisplay = document.getElementById('show-details');
const selectedDateDayElement = document.getElementById('selected-date-day');
const selectedDateElement = document.getElementById('selected-date');

let latestClicked = null;
let latestPreviouslyClicked = null;

// if there is no date, dont add hover efects
for (let i = 0; i < calendarDates.length; i++) {
    if (calendarDates[i].textContent.trim() === '') {
        calendarDates[i].classList.remove('hover:bg-pink-500', 'hover:shadow-md', 'hover:cursor-pointer', 'hover:shadow-pink-500');
        calendarDates[i].classList.add('empty')
    }
}

// select only elements that are not empty
const clickableDates = document.querySelectorAll('.clickable:not(.empty)');


clickableDates.forEach(dateElement => {
    dateElement.addEventListener('click', () => {
        const dateValue = dateElement.textContent.trim();
        const year = 2017;
        const month = 1;

        if (latestClicked !== null) {
            latestPreviouslyClicked = latestClicked;
            latestClicked = null;
            latestPreviouslyClicked.classList.remove('bg-pink-500');
        }

        dateElement.classList.add('bg-pink-500', 'shadow-md', 'shadow-pink-500');
        latestClicked = dateElement;

        const selectedDate = new Date(year, month, parseInt(dateValue));

        const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        const dayOfWeek = daysOfWeek[selectedDate.getDay()];

        selectedDateDayElement.textContent = dayOfWeek;
        selectedDateElement.textContent = dateValue;

        dateDisplay.style.display = 'block';
    });
});



// Close the date details when clicked outside, and this works at it should
document.addEventListener('click', event => {
    if (!event.target.classList.contains('clickable')) {
        clickableDates.forEach(element => {
            element.classList.remove('bg-pink-500');
        });
        dateDisplay.style.display = 'none';
    }
});

Das Problem, mit dem ich konfrontiert bin, ist, dass der Schatten aller zuvor angeklickten Elemente erhalten bleibt:

Das erwartete Verhalten ist:

• Ich klicke auf Datum A – es erscheint mit einem rosa Hintergrund und Schatten („bg-pink-500 Shadow-md Shadow-pink-500“)
• Ich klicke auf Datum B – es erscheint ein rosa Hintergrund und Schatten, Datum A hat nur einen Schatten
• Ich klicke auf Datum C – es erhält einen rosa Hintergrund und Schatten, Datum B hat nur Schatten, Datum A hat keine zusätzlichen Klassen hinzugefügt.