jQuery装修案例分类条件筛选代码
在网站或应用程序中，我们经常会遇到需要对装修案例进行分类和筛选的需求。比如，我们可能需要根据装修风格、房屋类型或者装修费用来筛选案例。为了满足这个需求，我们可以使用jQuery来实现一个简单的分类条件筛选功能。
准备工作
在开始编写代码之前，我们需要先准备一些基本的资源。首先，我们需要一个包含装修案例信息的数据源，这可以是一个JSON文件或者通过AJAX从后端获取的数据。假设我们有一个JSON文件，结构如下：
[
{
"id": 1,
"name": "案例1",
"style": "现代",
"type": "公寓",
"cost": "10000"
},
{
"id": 2,
"name": "案例2",
"style": "简约",
"type": "别墅",
"cost": "20000"
},
{
"id": 3,
"name": "案例3",
"style": "欧式",
"type": "公寓",
"cost": "15000"
}
]
接下来，我们需要一个界面来展示装修案例和筛选条件。这个界面可以是一个简单的HTML页面，其中包含一个用于展示案例的容器，以及用于选择筛选条件的表单元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>装修案例分类条件筛选</title>
<!-- 引入jQuery库 -->
<script src="
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
装修案例分类条件筛选
<form id="filterForm">
<label for="styleSelect">风格：</label>
<select id="styleSelect">
<option value="">全部</option>
<option value="现代">现代</option>
<option value="简约">简约</option>
<option value="欧式">欧式</option>
</select>
<label for="typeSelect">类型：</label>
<select id="typeSelect">
<option value="">全部</option>
<option value="公寓">公寓</option>
<option value="别墅">别墅</option>
</select>
<label for="costRange">费用范围：</label>
<input type="text" id="costRange" placeholder="最低费用-最高费用">
<input type="submit" value="筛选">
</form>
<div id="caseContainer"></div>
</body>
</html>
实现筛选功能
在上面的HTML代码中，我们引入了一个名为script.js的JavaScript文件，用于实现筛选功能。现在，我们来编写这个文件的代码。
$(document).ready(function() {
// 加载装修案例数据
$.getJSON('cases.json', function(data) {
displayCases(data);
});
// 监听筛选表单的提交事件
$('#filterForm').submit(function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
// 获取筛选条件的值
var style = $('#styleSelect').val();
var type = $('#typeSelect').val();
var costRange = $('#costRange').val().split('-');
var minCost = parseInt(costRange[0]) || 0;
var maxCost = parseInt(costRange[1]) || Infinity;
// 根据筛选条件过滤案例数据
var filteredCases = cases.filter(function(case) {
return (style === '' || case.style === style) &&
(type === '' || case.type === type) &&
(case.cost >= minCost && case.cost <= maxCost);
});
displayCases(filteredCases);
});
});
// 展示装修案例
function displayCases(cases) {
var caseContainer = $('#caseContainer');
caseContainer.empty(); // 清空容器
if (cases.length === 0) {
caseContainer.text('没有符合条件的案例。');
} else {
cases.forEach(function(case) {
var caseElement = $('<div class="case"></div
