kelas html tidak dikemas kini (tiada muat semula halaman)

Question

Saya ingin mengemas kini kelas HTML (tanpa muat semula halaman), nilai sebenar sedang dikemas kini dan item lain pada halaman adalah betul, tetapi saya tidak boleh mengemas kini warna latar belakang kelas menggunakan kod yang saya gunakan .

Saya cuba dapatkan ini:

<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>

Tukar kepada ini (dari bg-hijau kepada bg-merah):

<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>

Jadi kod saya kelihatan seperti ini:

<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 adalah seperti ini:

$.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);

Nilai alert_colour ialah info-box-icon bg-green apabila halaman dimuatkan.

Apabila halaman dimuatkan, ia berfungsi dengan baik dan menunjukkan kotak hijau, tetapi jika alert_colour 的值更改为 info-box-icon bg-red ia tidak dikemas kini melainkan saya memuat semula halaman tersebut.

Dalam output log konsol saya melihat bahawa ia dikemas kini dengan betul (apabila nilai berubah daripada info-box-icon bg-green 到 info-box-icon bg-red kepada info-box-icon bg-red tetapi pada skrin ia kekal sama seperti semasa halaman dimuatkan .Terdapat nilai (teks) lain pada halaman yang sedang dikemas kini, cuma elemen kelas tidak dikemas kini

.

Answer 1

Memandangkan anda nampaknya menukar kategori alert_status kepada alert_colour atau sesuatu yang rawak seperti itu, anda kehilangan titik rujukan anda untuk menukar kategori akan datang.

Untuk jawapan saya, saya sebenarnya merujuk ibu bapa alert_icon kerana ini akan membolehkan anda merujuknya tanpa mengira kelas.

Kemudian sebagai ujian saya menambah info-box-icon bg-red menggunakan addClass . Kemudian saya menggunakan removeClass tanpa parameter dan memautkannya dengan addClass untuk menambah info-box-icon bg-green.

Selain itu, memandangkan anda mendapat kelas daripada tatasusunan, anda boleh menghantarnya ke fungsi addClass jQuery hanya dengan menggabungkan tatasusunan dengan ruang.

Gunakan attr dan tulis ganti setiap masa.

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>