Weisen Sie dem zuletzt angeklickten Element Klassen zu

Question

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.

Answer 1

好吧，我也误读了你的问题。

问题出在部分

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

您实际上只是从 latestClicked 元素中删除背景，而从未删除阴影样式。

这应该有效：

if(latestPreviouslyClicked !== null) {
  latestPreviouslyClicked.classList.remove('shadow-md', 'shadow-pink-500');
}
// update second latest element after changing the classes
latestPreviouslyClicked = latestClicked;
if(latestClicked !== null) {
  latestClicked.classList.remove('bg-pink-500');
}
latestClicked = dateElement;

重要的部分是在将元素重新分配给下一个元素之前改变该元素。

或者，如果可选链接在您的环境中工作（捆绑程序或仅支持新浏览器）：

latestPreviouslyClicked?.classList.remove('shadow-md', 'shadow-pink-500');
// update second latest element after changing the classes
latestPreviouslyClicked = latestClicked;

latestClicked?.classList.remove('bg-pink-500');
latestClicked = dateElement;