Bagaimana untuk membandingkan warna dalam JavaScript tanpa membandingkan warna latar belakang secara langsung?

Bagaimana hendak membandingkan warna dalam JavaScript?

Kod anda membandingkan warna latar belakang elemen dengan nilai tertentu (#ECECF4). Walau bagaimanapun, pendekatan ini tidak disyorkan kerana ia menggabungkan logik perniagaan dengan pembentangan.

Sebaliknya, pertimbangkan untuk mengekalkan logik dalam JavaScript dan menggunakan kelas untuk mewakili keadaan yang berbeza secara visual. Ini membolehkan anda memisahkan penggayaan daripada logik perniagaan dan memastikan pembentangan dikendalikan oleh CSS semata-mata.

Sebagai contoh, anda boleh menggunakan jQuery untuk menogol kelas 'aktif' apabila elemen diklik:

$(".list").on("click", "li", function() {
  $(this).toggleClass('active');
});

Kemudian, tentukan CSS yang sepadan untuk menukar warna latar belakang elemen aktif:

.list {
  width: 100%;
  padding: 0;
}
.list li {
  padding: 5px 10px;
  list-style: none;
  cursor: pointer;
}
.list li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.list li.active {
  background-color: #eeeecc;
}

Pendekatan ini membolehkan anda memanipulasi pembentangan tanpa mengubah logik perniagaan, membawa kepada lebih bersih dan lebih banyak lagi kod boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk membandingkan warna dalam JavaScript tanpa membandingkan warna latar belakang secara langsung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!