更新status()相关逻辑：作品集网站项目切换功能技术问询

Hey there! Let's get that project navigation logic working smoothly for your portfolio. Based on the code snippet you shared, here's a clean, scalable way to polish the projectStatus system so it handles clicks, scrolls, and loop transitions reliably.

Key Improvements We'll Add #

• Avoid duplicate DOM queries for better performance
• Handle looped navigation (cycle back to the first project after the last one)
• Add debouncing to prevent accidental rapid triggers from scrolling
• Make the code easier to extend as you add more projects

Full Updated Code #

First, let's restructure your logic with these improvements:

// Initialize state and cache project elements to avoid repeated DOM searches
let projectStatus = 1; // Keeping your 1-based index for consistency
const projectSelectors = ['#bona', '#peak', '#your-next-project', '#another-project']; // Add all your project IDs here

// Debounce function to stop scroll events from firing too frequently
function debounce(func, delay = 200) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

function switchprojects() {
  // Remove the "float" class from the current active project
  $(projectSelectors[projectStatus - 1]).removeClass('float');

  // Update status: loop back to 1 when we reach the last project
  projectStatus = projectStatus >= projectSelectors.length ? 1 : projectStatus + 1;

  // Add "float" class to the new active project
  $(projectSelectors[projectStatus - 1]).addClass('float');
}

// Replace inline event handlers with cleaner JS bindings
document.body.addEventListener('wheel', debounce(switchprojects));
$('.explore-box').on('click', switchprojects);

Breakdown of Changes #

1. Project Array: Storing all project selectors in an array means you won't need to write endless if/else blocks as you add more work to your portfolio—just add a new ID to the array.
2. Debouncing: The debounce function ensures that rapid scroll wheel movements don't trigger dozens of unnecessary switch events, making the navigation feel smoother.
3. Looped Transition: The status resets to 1 once it reaches the end of your project list, so users can cycle through your work continuously.
4. Cleaner Event Binding: Ditching inline onwheel and onClick attributes separates your HTML and JavaScript, which is better for maintainability.

Optional: Native JS Alternative (No jQuery) #

If you want to drop jQuery for vanilla JavaScript, here's an equivalent version:

let projectStatus = 0; // Switching to 0-based index for easier array handling
const projectElements = document.querySelectorAll('.project-item'); // Add a shared class to all project divs

function switchprojects() {
  projectElements[projectStatus].classList.remove('float');
  // Cycle to next project, or back to first if at the end
  projectStatus = (projectStatus + 1) % projectElements.length;
  projectElements[projectStatus].classList.add('float');
}

document.body.addEventListener('wheel', debounce(switchprojects));
document.querySelector('.explore-box').addEventListener('click', switchprojects);

Quick CSS Tip #

Make sure your .float class includes a transition to make the switch feel polished:

.float {
  /* Your existing styles */
  transition: all 0.3s ease-in-out;
}

内容的提问来源于stack exchange，提问作者Kareem Sabri