Rumah > Artikel > hujung hadapan web > jquery melaksanakan perubahan warna item yang dipilih

jquery melaksanakan perubahan warna item yang dipilih

WBOYasal: 2023-05-12 11:55:061032semak imbas

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>

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: 点击事件处理逻辑
    });
});

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');
});

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

.selected {
    background-color: #f5f5dc;
}

Kod jQuery lengkap adalah seperti berikut:

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

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!

JavaScript jquery css html 事件 dom 选择器 ul li

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Buku JavaScript mana yang lebih baik?Artikel seterusnya：Buku JavaScript mana yang lebih baik?

Artikel berkaitan

Lihat lagi