Bagaimana untuk menulis kotak penapis dalam jquery

JQuery ialah perpustakaan Javascript yang berkuasa yang boleh mengendalikan dokumen HTML dengan mudah, menjadikan operasi dokumen dan pemprosesan acara lebih mudah. Dalam artikel ini, kita akan belajar cara menggunakan JQuery untuk mencipta kotak penapis, yang akan menjadi kemahiran yang sangat praktikal. Sebelum memulakan, anda harus mempunyai pengetahuan asas tentang JQuery.

1. Buat struktur HTML

Pertama, kita perlu mencipta bekas yang mengandungi kotak penapis dalam HTML. Struktur HTML ringkas boleh dibuat menggunakan kod berikut, yang mengandungi elemen pilih dan senarai elemen anak yang mengandungi pilihan:

<div id="filter-container">
  <select id="filter-select">
    <option value="">所有</option>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
  </select>
  <ul id="filter-list">
    <li class="red">红色物品</li>
    <li class="blue">蓝色物品</li>
    <li class="green">绿色物品</li>
  </ul>
</div>

Dalam kod di atas, kami mencipta elemen yang mengandungi bekas". Terdapat elemen pilih dengan id "pilih penapis" dalam bekas, yang digunakan untuk memilih keadaan penapis. Di bawah ialah senarai tidak tertib dengan id "senarai penapis", yang mengandungi beberapa item yang akan ditapis.

2. Menulis fungsi penapis

Seterusnya, kita perlu menulis fungsi penapis yang bertanggungjawab untuk menunjukkan atau menyembunyikan elemen yang digunakan untuk penapisan berdasarkan keadaan penapis yang dipilih. Fungsi ini boleh dicapai menggunakan kod berikut:

function filter() {
  var selected = $("#filter-select").val(); // 获取选择的筛选条件
  if(selected == "") { // 如果没有选择
    $("#filter-list li").show(); // 显示所有元素
  } else { // 如果选择了条件
    $("#filter-list li").hide(); // 隐藏所有元素
    $("." + selected).show(); // 显示与条件匹配的元素
  }
}

Dalam kod di atas, kami telah menentukan fungsi yang dipanggil penapis. Fungsi ini akan mendapatkan kriteria penapis yang dipilih dan menunjukkan atau menyembunyikan elemen berdasarkan kriteria yang dipilih. Pertama, kami menggunakan pemilih JQuery untuk mendapatkan nilai keadaan penapis dan menyimpannya dalam pembolehubah yang dipilih. Seterusnya, kami menggunakan pernyataan if untuk menyemak sama ada keadaan dipilih. Jika tiada pemilihan, semua elemen akan dipaparkan menggunakan kaedah persembahan JQuery. Jika syarat dipilih, gunakan kaedah sembunyikan untuk menyembunyikan semua elemen, gunakan penapis untuk menapis elemen yang sepadan dengan keadaan penapis dan gunakan kaedah tunjukkan untuk memaparkan elemen ini.

3. Menjawab interaksi pengguna

Kini, kita perlu mengaitkan fungsi penapis dengan interaksi pengguna. Fungsi penapis boleh dikaitkan dengan peristiwa perubahan dalam elemen pilih menggunakan kod berikut:

$("#filter-select").change(filter); // 注册change事件并调用filter函数

Dalam kod di atas, kami memilih elemen pilih penapis menggunakan pemilih JQuery dan memanggil kaedah perubahan untuk menyambungkannya dengan Fungsi bernama penapis dikaitkan. Setiap kali pengguna menukar kriteria penapis, fungsi penapis akan dipanggil.

4. Kod Penuh

Berikut ialah contoh kod lengkap untuk mencipta dan memaparkan senarai elemen dengan kotak penapis:

  
  
  
  <script>
    function filter() {
      var selected = $("#filter-select").val(); // 获取选择的筛选条件
      if(selected == "") { // 如果没有选择
        $("#filter-list li").show(); // 显示所有元素
      } else { // 如果选择了条件
        $("#filter-list li").hide(); // 隐藏所有元素
        $("." + selected).show(); // 显示与条件匹配的元素
      }
    }
    
    $(function() {
      $(&quot;#filter-select&quot;).change(filter); // 注册change事件并调用filter函数
    });
  </script>


  

    
      所有
      红色
      蓝色
      绿色
    
    

      
红色物品
      
蓝色物品
      
绿色物品
    
  

Di Atas Ini ialah tutorial tentang cara menggunakan JQuery untuk membuat kotak penapis saya harap ia dapat membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menulis kotak penapis dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!