55 lines
2.1 KiB
JavaScript
55 lines
2.1 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) {
|
||
// 如果需要额外的功能（比如日志记录等），可以插入代码
|
||
// 例如：console.log('Tool clicked:', link.href);
|
||
// 无需手动修改 target="_blank"，浏览器会根据 <a> 标签的设置自动处理
|
||
});
|
||
}
|
||
});
|
||
} |