jquery melaksanakan perubahan warna item yang dipilih-Soal Jawab bahagian hadapan-php.cn

jquery melaksanakan perubahan warna item yang dipilih

WBOY

Lepaskan： 2023-05-12 11:55:06

asal

1117 orang telah melayarinya

jQuery ialah perpustakaan JavaScript yang sangat popular yang boleh memudahkan pengaturcaraan JavaScript untuk pembangun dan meningkatkan kecekapan pembangunan. Dalam pembangunan web, untuk memberikan pengalaman pengguna yang lebih baik, kami selalunya perlu membuat perubahan gaya pada elemen halaman. Artikel ini akan memperkenalkan cara jQuery melaksanakan fungsi menukar warna item yang dipilih.

1. Struktur HTML

Pertama, kita perlu menambah beberapa elemen senarai pada HTML untuk menunjukkan kesan menukar warna item yang dipilih. Berikut ialah struktur HTML ringkas:

<!DOCTYPE html>
<html>
<head>
    <title>选中项变颜色</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .selected {
            background-color: #f5f5dc;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>列表项1</li>
        <li>列表项2</li>    
        <li>列表项3</li>    
        <li>列表项4</li>
    </ul>
</body>
</html>

Salin selepas log masuk

Ini mentakrifkan elemen ul yang mengandungi empat li elemen. Apabila pengguna mengklik pada salah satu elemen li, kami menetapkan elemen itu kepada keadaan yang dipilih dan menukar warna latar belakangnya.

2. jQuery untuk menukar warna item yang dipilih

Seterusnya, kita perlu menggunakan jQuery untuk mencapai kesan perubahan warna apabila pengguna mengklik pada item senarai. Berikut ialah langkah khusus:

Dapatkan semua li elemen melalui pemilih jQuery dan ikat click acara kepada mereka.

$(document).ready(function(){
    $("#list li").click(function(){
        // TODO: 点击事件处理逻辑
    });
});

Salin selepas log masuk

Untuk setiap elemen li yang diklik, kita perlu menambah kelas CSS selected dan mengalih keluar kelas selected untuk semua item senarai lain.

$("#list li").click(function(){
    // 添加选中状态
    $(this).addClass('selected');
    // 移除其他元素的选中状态
    $(this).siblings().removeClass('selected');
});

Salin selepas log masuk

Akhir sekali, tambahkan gaya pada warna latar belakang item yang dipilih:

.selected {
    background-color: #f5f5dc;
}

Salin selepas log masuk

Kod jQuery lengkap adalah seperti berikut:

$(document).ready(function(){
    $("#list li").click(function(){
        // 添加选中状态
        $(this).addClass('selected');
        // 移除其他元素的选中状态
        $(this).siblings().removeClass('selected');
    });
});

Salin selepas log masuk

Tiga , Pratonton kesan

Kesan akhir ditunjukkan dalam rajah di bawah:

jquery melaksanakan perubahan warna item yang dipilih

4. Ringkasan

Artikel ini memperkenalkan cara untuk menggunakan jQuery untuk mencapai pemilihan Fungsi item menukar warna. Melalui mengkaji artikel ini, anda telah mempelajari cara mengakses elemen DOM, menambah dan mengalih keluar kelas CSS dan mengemas kini halaman dalam masa nyata melalui jQuery. Saya harap artikel ini dapat membantu anda mempelajari jQuery dan meningkatkan kecekapan pembangunan web.

Atas ialah kandungan terperinci jquery melaksanakan perubahan warna item yang dipilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!