Tetapkan kelas kepada elemen yang paling baru diklik

Question

Saya mempunyai kalendar yang kelihatan seperti ini, digayakan menggunakan Tailwind CSS:

8 Rabu sedang diklik, jadi ia mempunyai latar belakang merah jambu dan bayang merah jambu. Yang ke-7 ialah elemen yang diklik sebelum ini, itulah sebabnya ia hanya mempunyai bayang merah jambu (saya mengalih keluar kelas latar belakang merah jambu tetapi mengekalkan bayang merah jambu).

Apa yang saya mahukan ialah mengekalkan elemen terbaharu yang diklik sebelum ini supaya saya boleh menambah bayang merah jambu, tetapi hanya pada elemen terkini dan bukan semua elemen yang diklik sebelum ini.

Beginilah rupa kod JavaScript saya:

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

Masalah yang saya hadapi ialah ia mengekalkan bayang-bayang semua elemen yang diklik sebelum ini:

Tingkah laku yang diharapkan ialah:

• Saya klik pada tarikh A - ia akan muncul dengan latar belakang merah jambu dan bayang ('bg-pink-500 Shadow-md Shadow-pink-500')
• Saya klik pada tarikh B - ia muncul dengan latar belakang merah jambu dan bayang, tarikh A hanya mempunyai bayang
• Saya klik pada tarikh C - ia mendapat latar belakang dan bayang merah jambu, tarikh B hanya mempunyai bayang, tarikh A tidak mempunyai sebarang kelas tambahan yang ditambah.

Answer 1

Baiklah, saya juga salah baca soalan awak.

Masalahnya terletak pada bahagian

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

Anda sebenarnya hanya mengalih keluar latar belakang daripada elemen latestClicked, bukan gaya bayang-bayang.

Ini sepatutnya berfungsi:

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;

Bahagian penting ialah mengubah elemen sebelum menugaskannya semula kepada elemen seterusnya.

Atau jika pautan pilihan berfungsi dalam persekitaran anda (bundler atau hanya menyokong pelayar baharu):

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;