将类分配给最近单击的元素

Question

我有一个看起来像这样的日历，其样式使用 Tailwind CSS：

8 Wednesday 当前已被点击，因此它具有粉红色的背景和粉红色的阴影。第 7 个是之前单击的元素，这就是为什么它只有粉红色阴影（我删除了粉红色背景类，但保留了粉红色阴影）。

我想要的是保留最新的先前单击的元素，以便我可以添加粉红色阴影，但仅限于最新的元素，而不是所有先前单击的元素。

这就是我的 JavaScript 代码的样子：

//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';
    }
});

我面临的问题是它保留了所有先前单击的元素的阴影：

预期行为是：

• 我点击日期 A - 它会出现粉红色背景和阴影 ('bg-pink-500 Shadow-md Shadow-pink-500')
• 我点击日期 B - 它会出现粉红色背景和阴影，日期 A 只有阴影
• 我点击日期 C - 它获得粉红色背景和阴影，日期 B 只有阴影，日期 A 没有添加任何额外的类。

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;