//生成筛选按钮
function createButtons(categories) {
const container = document.getElementById('button-container');
categories.forEach(category => {
const button = document.createElement('button');
button.className = 'filter-button';
button.setAttribute('data-category', category);
button.textContent = category;
container.appendChild(button);
});
}
createButtons(categories);
//生成列表
document.addEventListener('DOMContentLoaded', () => {
// 获取容器
const productListGrid = document.getElementById('product-list');
if (!productListGrid) {
console.error('Product list grid container not found.');
return;
}
// 遍历产品列表并生成 HTML
productlist.forEach((product, index) => {
// 创建产品列表项
const productBox = document.createElement('div');
productBox.className = 'product-list-box';
productBox.setAttribute('data-category', product.category);
// 创建 flex--list-box 容器
const flexListBox = document.createElement('div');
flexListBox.className = 'flex--list-box';
// 创建链接和图片
const link = document.createElement('a');
link.href = product.link;
link.target = '_blank'; // 添加这一行
const img = document.createElement('img');
img.src = product.image;
img.alt = 'Product Image';
link.appendChild(img);
flexListBox.appendChild(link);
// 创建标题部分
const titleDiv = document.createElement('div');
titleDiv.className = 'product-list-title';
// 创建标题1
const titleLinkDiv = document.createElement('div');
const titleLinkAnchor = document.createElement('a');
titleLinkAnchor.href = product.link;
titleLinkAnchor.target = '_blank'; // 添加这一行
titleLinkAnchor.textContent = product.title1;
titleLinkDiv.appendChild(titleLinkAnchor);
titleDiv.appendChild(titleLinkDiv);
// 创建标题2
const titleLinkDiv2 = document.createElement('div');
const titleLinkAnchor2 = document.createElement('a');
titleLinkAnchor2.href = product.link;
titleLinkAnchor2.target = '_blank'; // 添加这一行
titleLinkAnchor2.textContent = product.title2;
titleLinkDiv2.appendChild(titleLinkAnchor2);
titleDiv.appendChild(titleLinkDiv2);
flexListBox.appendChild(titleDiv);
// 创建 detail-button 部分
const detailButton = document.createElement('div');
detailButton.className = 'detail-button';
const detailLink = document.createElement('a');
detailLink.href = product.link;
detailLink.target = '_blank'; // 添加这一行
detailLink.textContent = 'Detail +';
detailButton.appendChild(detailLink);
flexListBox.appendChild(detailButton);
// 将 flex--list-box 添加到产品列表项中
productBox.appendChild(flexListBox);
// 将产品列表项添加到容器中
productListGrid.appendChild(productBox);
});
});
let currentPage = 1;
const pageSize = 8; // 每页显示的产品数量
let filteredProducts = [];
function showPage(pageNumber) {
const startIndex = (pageNumber - 1) * pageSize;
const endIndex = startIndex + pageSize;
filteredProducts.forEach((box, index) => {
if (index >= startIndex && index < endIndex) {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
});
currentPage = pageNumber;
updatePaginationStyle();
}
function updatePaginationStyle() {
const paginationButtons = document.querySelectorAll('.pagination button[data-page]');
paginationButtons.forEach((button) => {
const pageNumber = parseInt(button.getAttribute('data-page'));
if (pageNumber === currentPage) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
}
function previousPage() {
if (currentPage > 1) {
showPage(currentPage - 1);
}
}
function nextPage() {
const totalPages = Math.ceil(filteredProducts.length / pageSize);
if (currentPage < totalPages) {
showPage(currentPage + 1);
}
}
function handlePageButtonClick(event) {
const pageNumber = parseInt(event.target.getAttribute('data-page'));
if (pageNumber !== currentPage) {
showPage(pageNumber);
}
}
// 筛选产品
function filterProducts(category) {
const productBoxes = document.querySelectorAll('.product-list-box');
filteredProducts = [];
productBoxes.forEach(box => {
const productCategory = box.getAttribute('data-category');
if (productCategory === category || category === 'All') {
box.style.display = 'block';
filteredProducts.push(box);
} else {
box.style.display = 'none';
}
});
currentPage = 1;
showPage(currentPage);
updatePaginationStyle();
}
// 搜索功能
document.addEventListener('DOMContentLoaded', function () {
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
searchButton.addEventListener('click', function () {
const productBoxes = document.querySelectorAll('.product-list-box');
const searchTerms = searchInput.value.trim().toLowerCase().split(/\s+/);
filteredProducts = [];
productBoxes.forEach(box => {
const productTitle = box.querySelector('.product-list-title div:first-child').textContent.trim().toLowerCase();
const productCategories = box.dataset.category.toLowerCase();
const productDescription = box.querySelector('.product-list-title div:last-child').textContent.trim().toLowerCase();
const matches = searchTerms.every(term => {
return productTitle.includes(term) ||
productCategories.includes(term) ||
productDescription.includes(term);
});
if (matches) {
box.style.display = 'block';
filteredProducts.push(box);
} else {
box.style.display = 'none';
}
});
currentPage = 1;
showPage(currentPage);
updatePaginationStyle();
});
searchInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
searchButton.click();
}
});
const params = new URLSearchParams(window.location.search);
const category = params.get('category') || 'All';
document.querySelectorAll('.filter-button').forEach(button => {
if (button.dataset.category === category) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
filterProducts(category);
showPage(currentPage); // 初始化时显示第一页
});
document.querySelectorAll('.filter-button').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.filter-button').forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
filterProducts(button.dataset.category);
});
});
document.querySelector('#prevPage').addEventListener('click', previousPage);
document.querySelector('#nextPage').addEventListener('click', nextPage);
document.querySelectorAll('.pagination button[data-page]').forEach(button => {
button.addEventListener('click', handlePageButtonClick);
});
document.querySelectorAll('.head_nav li').forEach(function (item) {
item.addEventListener('mouseover', function (event) {
if (item.textContent.includes('PRODUCTS') ||
item.textContent.includes('SERVICES') ||
item.textContent.includes('SOLUTIONS') ||
item.textContent.includes('ABOUT US')) {
event.preventDefault();
document.querySelectorAll('.dropdown-menu-item').forEach(function (menuItem) {
menuItem.style.display = 'none';
});
if (item.textContent.includes('PRODUCTS')) {
document.getElementById('products-menu').style.display = 'block';
} else if (item.textContent.includes('SERVICES')) {
document.getElementById('services-menu').style.display = 'block';
} else if (item.textContent.includes('SOLUTIONS')) {
document.getElementById('solutions-menu').style.display = 'block';
} else if (item.textContent.includes('ABOUT US')) {
document.getElementById('about-us-menu').style.display = 'block';
}
}
});
});
window.addEventListener('scroll', function () {
document.querySelectorAll('.dropdown-menu-item').forEach(function (menuItem) {
menuItem.style.display = 'none';
});
});
