51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
// 获取搜索框输入和所有工具卡片
|
|
const searchInput = document.getElementById('search-input');
|
|
const toolCards = document.querySelectorAll('.tool-card');
|
|
|
|
// 监听搜索框的输入事件
|
|
searchInput.addEventListener('input', function() {
|
|
const searchTerm = searchInput.value.toLowerCase().trim(); // 获取搜索关键词并转换为小写
|
|
|
|
// 过滤工具卡片
|
|
filterCards(searchTerm);
|
|
});
|
|
|
|
// 过滤工具卡片
|
|
function filterCards(searchTerm) {
|
|
const filteredCards = Array.from(toolCards).filter(card => {
|
|
const title = card.querySelector('.tool-name').textContent.toLowerCase();
|
|
const description = card.querySelector('.card-description').textContent.toLowerCase();
|
|
return title.includes(searchTerm) || description.includes(searchTerm);
|
|
});
|
|
|
|
// 更新卡片布局
|
|
updateCardLayout(filteredCards, searchTerm);
|
|
}
|
|
|
|
// 更新卡片布局，确保卡片顺序正确
|
|
function updateCardLayout(filteredCards, searchTerm) {
|
|
const container = document.querySelector('.tools-grid');
|
|
container.innerHTML = ''; // 清空容器中的所有卡片
|
|
|
|
if (searchTerm === '') {
|
|
// 如果搜索框为空，恢复原始顺序
|
|
toolCards.forEach(card => container.appendChild(card));
|
|
} else {
|
|
// 搜索时按顺序添加匹配的卡片
|
|
filteredCards.forEach(card => container.appendChild(card));
|
|
}
|
|
|
|
// 确保跳转链接依然有效
|
|
addLinkFunctionality(filteredCards);
|
|
}
|
|
|
|
// 为每个卡片的链接添加跳转功能
|
|
function addLinkFunctionality(cards) {
|
|
cards.forEach(card => {
|
|
const link = card.querySelector('.tool-card-link'); // 获取卡片中的链接元素
|
|
if (link) {
|
|
link.addEventListener('click', function(event) {
|
|
});
|
|
}
|
|
});
|
|
} |