가장 최근에 클릭한 요소에 클래스 할당

Question

Tailwind CSS를 사용하여 스타일이 지정된 다음과 같은 달력이 있습니다.

8 현재 수요일이 클릭되어 있어서 배경이 핑크색이고 그림자도 핑크색이에요. 7번째 요소는 이전에 클릭한 요소이므로 분홍색 그림자만 있습니다(분홍색 배경 클래스는 제거했지만 분홍색 그림자는 유지했습니다).

내가 원하는 것은 이전에 클릭한 최신 요소를 유지하여 분홍색 그림자를 추가할 수 있도록 하는 것입니다. 그러나 이전에 클릭한 모든 요소가 아닌 최신 요소에만 추가할 수 있습니다.

내 JavaScript 코드는 다음과 같습니다.

으아아아

제가 직면한 문제는 이전에 클릭한 모든 요소의 그림자가 유지된다는 것입니다.

예상되는 동작은 다음과 같습니다.

• 날짜 A를 클릭하면 분홍색 배경과 그림자가 나타납니다('bg-pink-500 Shadow-md Shadow-pink-500')
• 날짜 B를 클릭하면 분홍색 배경과 그림자가 나오고, 날짜 A에는 그림자만 있습니다
• 날짜 C를 클릭하면 분홍색 배경과 그림자가 생기고, 날짜 B에는 그림자만 있고, 날짜 A에는 추가 클래스가 없습니다.

Answer 1

알겠습니다. 저도 귀하의 질문을 잘못 읽었습니다.

문제는 부분에 있습니다

으아아아

실제로는 latestClicked 요소에서 배경만 제거하고 그림자 스타일은 제거하지 않습니다.

이렇게 하면 됩니다:

으아아아

중요한 부분은 요소를 다음 요소에 다시 할당하기 전에 요소를 변경하는 것입니다.

또는 선택적 링크 가 귀하의 환경에서 작동하는 경우(번들러 또는 새 브라우저만 지원):

으아아아