同位素过滤-在页面加载时加载来自每个类别的特定数字
同位素过滤是一种在网页上实现动态内容加载的技术，它允许在页面加载时根据特定条件加载内容。以下是一个简单的示例，展示如何在页面加载时加载来自每个类别的特定数字。
HTML结构
首先，我们需要一个基本的HTML结构来显示类别和数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isotope Filtering</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="filters">
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter="category1">Category 1</button>
<button class="filter" data-filter="category2">Category 2</button>
<button class="filter" data-filter="category3">Category 3</button>
</div>
<div class="items">
<!-- Items will be loaded here -->
</div>
<script src="script.js"></script>
</body>
</html>CSS样式
接下来，我们需要一些CSS来美化页面和设置同位素过滤的样式。
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.filters {
margin-bottom: 20px;
}
.filter {
padding: 10px 20px;
margin-right: 10px;
cursor: pointer;
}
.items {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}JavaScript逻辑
最后，我们需要JavaScript来处理过滤逻辑并在页面加载时加载特定数字。
// script.js
document.addEventListener('DOMContentLoaded', function() {
const itemsContainer = document.querySelector('.items');
const filters = document.querySelectorAll('.filter');
// Sample data
const data = {
category1: [1, 2, 3],
category2: [4, 5, 6],
category3: [7, 8, 9]
};
// Function to render items
function renderItems(category) {
itemsContainer.innerHTML = ''; // Clear previous items
const numbers = data[category] || [];
numbers.forEach(number => {
const item = document.createElement('div');
item.classList.add('item');
item.textContent = number;
itemsContainer.appendChild(item);
});
}
// Event listeners for filters
filters.forEach(filter => {
filter.addEventListener('click', function() {
const category = this.getAttribute('data-filter');
renderItems(category);
});
});
// Load initial items (e.g., category1)
renderItems('category1');
});解释
- HTML结构：我们创建了一个包含过滤按钮和项目容器的简单页面。
- CSS样式：我们设置了基本的样式来美化页面和设置同位素过滤的布局。
- JavaScript逻辑：
- 我们定义了一个包含类别和数字的样本数据对象。
- 我们创建了一个函数
renderItems来根据类别渲染项目。 - 我们为每个过滤按钮添加了事件监听器，当按钮被点击时，调用
renderItems函数来更新项目容器。 - 我们在页面加载时调用
renderItems函数来加载初始项目（例如，类别1的项目）。
通过这种方式，我们可以在页面加载时加载来自每个类别的特定数字，并根据用户的过滤选择动态更新内容。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
