HTML クラスを (ページを更新せずに) 更新したいのですが、実際の値は更新されており、ページ上の他の項目は正しいのですが、次のコードを使用してクラスの背景色を更新できません。使っています。
これを取得しようとしています:
リーリーこれに変更します (背景が緑から赤に):
リーリーしたがって、私のコードは次のようになります:
リーリーJavaScript は次のとおりです:
リーリーページがロードされたときのalert_colourの値は、info-box-icon bg-greenです。
ページが読み込まれると、正常に動作し、緑色のボックスが表示されますが、alert_colour の値が info-box-icon bg-red に変更されると更新されません。ページを更新しない限り。
コンソールのログ出力では、正しく更新されていることがわかります (値が info-box-icon bg-green から info-box-icon bg-red に変化したとき)しかし、画面上ではページが読み込まれたときのままです。ページ上には他の値 (テキスト) が更新されていますが、クラス要素だけが更新されていません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
alert_status のカテゴリを alert_colour またはそのようなランダムなものに変更しているようであるため、将来のカテゴリを変更するための参照ポイントを失います。
私の答えでは、実際に、クラスに関係なく参照できるように、alert_icon の親を参照しました。
次に、テストとして、addClass を使用して info-box-icon bg-red を追加しました。次に、パラメーターなしでremoveClassを使用し、addClassとリンクして、info-box-icon bg-greenを追加します。
また、配列からクラスを取得しているため、配列をスペースで連結するだけでクラスを jQuery の addClass 関数に渡すことができます。
attr を使用し、毎回上書きします。