搜尋

首頁  >  問答  >  主體

將類別指派給最近單擊的元素

我有一個看起來像這樣的日曆,其樣式使用 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';
    }
});

我面臨的問題是它保留了所有先前點擊的元素的陰影:

預期行為是:

P粉021854777P粉021854777258 天前555

全部回覆(1)我來回復

  • P粉237689596

    P粉2376895962024-04-04 12:08:19

    好吧,我也誤讀了你的問題。

    問題出在部分

    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;

    回覆
    0
  • 取消回覆