jquery怎麼寫篩選框
Apr 17, 2023 am 09:50 AMJQuery是一個強大的Javascript庫，可以方便地操作HTML文檔，使的文檔操作和事件處理更加容易。在本文中，我們將學習如何使用JQuery來建立篩選框，這將是一個非常實用的技能。在開始之前，您應該具備一定的JQuery基礎知識。
- 建立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」的無序列表，其中包含了一些物品，這些物品將被篩選。
- 編寫篩選函數
接下來，我們需要編寫一個篩選函數，該函數負責根據選定的篩選條件顯示或隱藏用於篩選的元素。可以使用以下程式碼實作此功能：
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方法將這些元素顯示出來。
- 回應使用者互動
現在，我們需要將篩選函數與使用者互動關聯。可以使用以下程式碼將篩選函數與選擇元素中的change事件相關聯：
$("#filter-select").change(filter); // 注册change事件并调用filter函数在上面的程式碼中，我們使用JQuery選擇器選擇篩選條件select元素，並呼叫change方法將其與名為filter的函數關聯起來。每當使用者更改篩選條件時，將呼叫filter函數。
- 完整程式碼
以下是完整的程式碼範例，用於建立和呈現帶有篩選框的元素清單：
<!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中文網其他相關文章！
熱門文章
熱門文章
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
JavaScript中的高階功能是什麼？如何使用它們來編寫更簡潔和可重複使用的代碼？
Mar 18, 2025 pm 01:44 PM
JavaScript中的高階功能是什麼？如何使用它們來編寫更簡潔和可重複使用的代碼？
