如何让多步骤表单的上一步按钮移除进度条中的已完成状态

Hey there! I see the issue with your multi-step form: when clicking "Next", the progress step gets marked as progtrckr-done correctly, but hitting "Prev" only switches the tab without undoing that completed state. Let's adjust the nextPrev function to fix this and keep the progress bar in sync with the current form step.

Step-by-Step Modification #

Here's how to update your JavaScript logic to handle backward navigation properly:

function nextPrev(n) {
  // Grab all form tabs and progress indicator steps
  const tabs = document.getElementsByClassName("tab");
  const progressSteps = document.getElementsByClassName("progtrckr-step");
  
  // Find the index of the currently active tab
  const currentTabIndex = Array.from(tabs).findIndex(tab => tab.classList.contains("active"));

  // Handle "Prev" action: Undo the done state for the step we're leaving
  if (n === -1 && currentTabIndex > 0) {
    // Target the progress step matching the current active tab
    const activeProgressStep = progressSteps[currentTabIndex];
    activeProgressStep.classList.remove("progtrckr-done");
  }

  // Execute existing tab switching logic (adjust class names if yours differ)
  tabs[currentTabIndex].classList.remove("active");
  const newTabIndex = currentTabIndex + n;
  tabs[newTabIndex].classList.add("active");

  // Update progress indicator's active state to match the new current step
  Array.from(progressSteps).forEach(step => {
    step.classList.remove("progtrckr-active");
  });
  progressSteps[newTabIndex].classList.add("progtrckr-active");
}

Key Changes Explained #

1. Detect backward navigation: We check if n === -1 (the signal for "Prev" button clicks) and confirm we're not on the first step (to avoid index errors).
2. Undo completed state: Before switching tabs, we target the progress step linked to the current tab and remove the progtrckr-done class, reverting it to an incomplete state.
3. Sync active indicator: After switching tabs, we update the progress bar to mark the new current step as active, ensuring the UI stays consistent with the form's actual state.

Quick Notes #

• Ensure your progtrckr-step elements are in the exact same order as your form tabs—this keeps the step-to-tab mapping accurate.
• If your original nextPrev function has additional validation or custom tab-switching logic, place the "undo done state" code right before the tab switch happens for backward navigation.

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