HTML 클래스를 업데이트하고 싶습니다(페이지 새로 고침 없이). 실제 값은 업데이트 중이고 페이지의 다른 항목은 정확하지만 사용 중인 코드를 사용하여 클래스의 배경색을 업데이트할 수 없습니다. .
이것을 얻으려고 합니다:
으아악다음으로 변경하세요(bg-green에서 bg-red로):
으아악제 코드는 다음과 같습니다:
으아악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에서 info-box-icon bg-red로 변경될 때). 그러나 화면에서는 페이지를 열 때와 동일하게 유지됩니다. 로드되었습니다.페이지에 업데이트되는 다른 값(텍스트)이 있으며 클래스 요소만 업데이트되지 않습니다
![[웹 프런트엔드] 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을 사용하고 매번 덮어쓰세요.