HTML クラスが更新されない (ページが更新されない)

Question

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 に変化したとき)しかし、画面上ではページが読み込まれたときのままです。ページ上には他の値 (テキスト) が更新されていますが、クラス要素だけが更新されていません。

Answer 1

alert_status のカテゴリを alert_colour またはそのようなランダムなものに変更しているようであるため、将来のカテゴリを変更するための参照ポイントを失います。

私の答えでは、実際に、クラスに関係なく参照できるように、alert_icon の親を参照しました。

次に、テストとして、addClass を使用して info-box-icon bg-red を追加しました。次に、パラメーターなしでremoveClassを使用し、addClassとリンクして、info-box-icon bg-greenを追加します。

また、配列からクラスを取得しているため、配列をスペースで連結するだけでクラスを jQuery の addClass 関数に渡すことができます。

attr を使用し、毎回上書きします。

リーリー リーリー リーリー