首頁 web前端 前端問答 jquery怎麼寫篩選框

jquery怎麼寫篩選框

Apr 17, 2023 am 09:50 AM

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

  1. 建立HTML結構

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

<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>
登入後複製

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

  1. 編寫篩選函數

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

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方法將這些元素顯示出來。

  1. 回應使用者互動

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

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

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

  1. 完整程式碼

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JQuery筛选框</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></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>
</head>
<body>
  <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>
</body>
</html>
登入後複製

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

什麼是使用效果?您如何使用它執行副作用? 什麼是使用效果?您如何使用它執行副作用? Mar 19, 2025 pm 03:58 PM

什麼是使用效果?您如何使用它執行副作用?

解釋懶惰加載的概念。 解釋懶惰加載的概念。 Mar 13, 2025 pm 07:47 PM

解釋懶惰加載的概念。

咖哩如何在JavaScript中起作用,其好處是什麼? 咖哩如何在JavaScript中起作用,其好處是什麼? Mar 18, 2025 pm 01:45 PM

咖哩如何在JavaScript中起作用,其好處是什麼?

JavaScript中的高階功能是什麼?如何使用它們來編寫更簡潔和可重複使用的代碼? JavaScript中的高階功能是什麼?如何使用它們來編寫更簡潔和可重複使用的代碼? Mar 18, 2025 pm 01:44 PM

JavaScript中的高階功能是什麼?如何使用它們來編寫更簡潔和可重複使用的代碼?

反應和解算法如何起作用? 反應和解算法如何起作用? Mar 18, 2025 pm 01:58 PM

反應和解算法如何起作用?

什麼是Usecontext?您如何使用它在組件之間共享狀態? 什麼是Usecontext?您如何使用它在組件之間共享狀態? Mar 19, 2025 pm 03:59 PM

什麼是Usecontext?您如何使用它在組件之間共享狀態?

您如何防止事件處理程序中的默認行為? 您如何防止事件處理程序中的默認行為? Mar 19, 2025 pm 04:10 PM

您如何防止事件處理程序中的默認行為?

受控和不受控制的組件的優點和缺點是什麼? 受控和不受控制的組件的優點和缺點是什麼? Mar 19, 2025 pm 04:16 PM

受控和不受控制的組件的優點和缺點是什麼?

See all articles