最近クリックした要素にクラスを割り当てる

Question

Tailwind CSS を使用してスタイルを設定した、次のようなカレンダーがあります。

＃＃＃＃８ 水曜日は現在クリックされているため、ピンクの背景とピンクの影が表示されます。 7 番目の要素は前にクリックした要素です。そのため、ピンクの影だけが表示されます (ピンクの背景クラスは削除しましたが、ピンクの影はそのままにしました)。

私が望むのは、以前にクリックした最新の要素を保持して、ピンクの影を追加できるようにすることですが、以前にクリックしたすべての要素ではなく、最新の要素にのみ追加します。

私の JavaScript コードは次のようになります:

リーリー

私が直面している問題は、以前にクリックしたすべての要素の影が保持されていることです。

予期される動作は次のとおりです:

日付 A をクリックすると、ピンクの背景と影 ('bg-pink-500 Shadow-md Shadow-pink-500') が表示されます。
• 日付 B をクリックすると、ピンクの背景と影が表示されます。日付 A には影のみが表示されます。
• 日付 C をクリックすると、ピンクの背景と影が付きます。日付 B には影のみがあり、日付 A には追加のクラスがありません。

Answer 1

わかりました、私もあなたの質問を読み間違えました。

問題は次の部分にあります

リーリー

実際には、latestClicked 要素から背景を削除しただけであり、影のスタイルは削除しませんでした。

これはうまくいくはずです:

リーリー

重要な部分は、次の要素に再割り当てする前に要素を変更することです。

または、 オプションのリンク が環境 (バンドラーまたは新しいブラウザーのみサポート) で動作する場合:

リーリー