jquery怎麼寫篩選框

JQuery是一個強大的Javascript庫，可以方便地操作HTML文檔，使的文檔操作和事件處理更加容易。在本文中，我們將學習如何使用JQuery來建立篩選框，這將是一個非常實用的技能。在開始之前，您應該具備一定的JQuery基礎知識。

1. 建立HTML結構

首先，我們需要在HTML中建立一個包含篩選框的容器。可以使用以下程式碼建立一個簡單的HTML結構，其中包含一個select元素和一個包含選項的子元素清單：

<div>
  <select>
    <option>所有</option>
    <option>红色</option>
    <option>蓝色</option>
    <option>绿色</option>
  </select>
  <ul>
    <li>红色物品</li>
    <li>蓝色物品</li>
    <li>绿色物品</li>
  </ul>
</div>

在上面的程式碼中，我們建立了一個包含id為“filter-container”的容器。容器中有一個id為「filter-select」的select元素，用來選擇篩選條件。下面是一個id為「filter-list」的無序列表，其中包含了一些物品，這些物品將被篩選。

2. 編寫篩選函數

接下來，我們需要編寫一個篩選函數，該函數負責根據選定的篩選條件顯示或隱藏用於篩選的元素。可以使用以下程式碼實作此功能：

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

在上面的程式碼中，我們定義了一個名為filter的函數。此函數將取得選定的篩選條件，並根據選定的條件顯示或隱藏元素。首先，我們使用JQuery選擇器來取得篩選條件的值，並將其儲存在selected變數中。接下來，我們使用if語句檢查是否選擇了條件。如果沒有選擇，則將所有元素顯示出來，使用JQuery的show方法。如果選擇了條件，則使用hide方法將所有元素隱藏起來，並使用篩選器篩選與篩選條件相符的元素，並使用show方法將這些元素顯示出來。

3. 回應使用者互動

現在，我們需要將篩選函數與使用者互動關聯。可以使用以下程式碼將篩選函數與選擇元素中的change事件相關聯：

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

在上面的程式碼中，我們使用JQuery選擇器選擇篩選條件select元素，並呼叫change方法將其與名為filter的函數關聯起來。每當使用者更改篩選條件時，將呼叫filter函數。

4. 完整程式碼

以下是完整的程式碼範例，用於建立和呈現帶有篩選框的元素清單：

nbsp;html>


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


  <div>
    <select>
      <option>所有</option>
      <option>红色</option>
      <option>蓝色</option>
      <option>绿色</option>
    </select>
    <ul>
      <li>红色物品</li>
      <li>蓝色物品</li>
      <li>绿色物品</li>
    </ul>
  </div>

以上就是如何使用JQuery來創建篩選框的教程，希望能夠幫助到你！

以上是jquery怎麼寫篩選框的詳細內容。更多資訊請關注PHP中文網其他相關文章！