les classes HTML ne sont pas mises à jour (pas de rafraîchissement de la page)

Question

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 :

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
    <span class="info-box-icon bg-green"><i class="alert_icon"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Current Alarm State</span>
            <span class="info-box-number alerted"><small></small></span>
        </div>
    </div>
</div>

Changez pour ceci (de bg-green à bg-red) :

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
    <span class="info-box-icon bg-red"><i class="alert_icon"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Current Alarm State</span>
            <span class="info-box-number alerted"><small></small></span>
        </div>
    </div>
</div>

Mon code ressemble donc à ceci :

<div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
    <span class="alert_colour"><i class="alert_icon"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Current Alarm State</span>
            <span class="info-box-number alerted"><small></small></span>
        </div>
    </div>
</div>

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 est info-box-icon bg-green lorsque la page se charge.

Lorsque la page se charge, elle fonctionne bien et affiche la case verte, mais si alert_colour 的值更改为 info-box-icon bg-red elle 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 de info-box-icon bg-green 到 info-box-icon bg-red à info-box-icon bg-red mais à 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

.

Answer 1

Puisque vous semblez changer la catégorie de alert_status en alert_colour ou 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 ajouter info-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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12">
  <div class="info-box">
    <span class=""><i class="alert_icon">alert</i></span>
    <div class="info-box-content">
      <span class="info-box-text">Current Alarm State</span>
      <span class="info-box-number alerted"><small></small></span>
    </div>
  </div>
</div>