Je souhaite mettre à jour une classe HTML (sans actualisation de page), les valeurs réelles sont mises à jour et les autres éléments de la page sont corrects, mais je ne parviens pas à mettre à jour la couleur d'arrière-plan de la classe en utilisant le code que j'utilise .
J'essaie d'obtenir ceci :
Current Alarm State
Changez pour ceci (de bg-green à bg-red) :
Current Alarm State
Mon code ressemble donc à ceci :
Current Alarm State
JavaScript est comme ceci :
$.ajax({ url: "update_all.php", type: "post", dataType: "json", success: function(response) { var len = response.length; for (var i = 0; i < len; i++) { var alert_colour = response[i].alert_colour; $(".alert_colour").attr('class', alert_colour); console.log(alert_colour); } }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus, errorThrown); } }); }, 1000);
La valeur de alert_colour estinfo-box-icon bg-greenlorsque la page se charge.
Lorsque la page se charge, elle fonctionne bien et affiche la case verte, mais sialert_colour的值更改为info-box-icon bg-redelle ne se met pas à jour à moins que j'actualise la page.
Dans la sortie du journal de la console, je vois qu'il se met à jour correctement (lorsque la valeur passe deinfo-box-icon bg-green到info-box-icon bg-redàinfo-box-icon bg-redmais à l'écran, elle reste la même que lorsque la page chargé .Il y a d'autres valeurs (texte) sur la page qui sont en cours de mise à jour, seuls les éléments de classe ne sont pas mis à jour
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Puisque vous semblez changer la catégorie dealert_statusenalert_colourou quelque chose de aléatoire comme ça, vous perdez votre point de référence pour changer les futures catégories.
Pour ma réponse, j'ai en fait référencé le parent de alert_icon car cela vous permettra de le référencer quelle que soit la classe.
Ensuite, à titre de test, j'ai ajoutéinfo-box-icon bg-red en utilisant addClass. Ensuite, j'utilise removeClass sans paramètres et je le lie avec addClass pour ajouterinfo-box-icon bg-green.
De plus, puisque vous obtenez les classes d'un tableau, vous pouvez les transmettre à la fonction addClass de jQuery simplement en concaténant les tableaux avec des espaces.
Utilisez attr et écrasez-le à chaque fois.
let green = ["info-box-icon","bg-green"]; let red = ["info-box-icon","bg-red"]; $alertBox = $(".alert_icon").parent(); $alertBox.addClass(red.join(" ")); $alertBox.removeClass().addClass(green.join(" "));.bg-red{background:red;} .bg-green{background:green;}