点击后隐藏当前控件并显示下一控件，递增步骤计数器的实现

我来帮你搞定这个分步交互的需求，下面是完整的可运行代码方案，每一步都给你解释清楚：

完整代码示例 #

<!-- HTML结构 -->
<div>
  <span id="step-count">1</span>
  <ul id="user">
    <li class="mdl-menu__item">User 1</li>
    <li class="mdl-menu__item">User 2</li>
    <li class="mdl-menu__item">User 3</li>
  </ul>
  <!-- 初始隐藏的button -->
  <button id="next-btn" class="hidden">确认选择，进入下一步</button>
  <!-- 初始隐藏的下一个控件，比如另一个选项列表 -->
  <ul id="action" class="hidden">
    <li class="mdl-menu__item">操作A</li>
    <li class="mdl-menu__item">操作B</li>
  </ul>
</div>

<style>
/* CSS样式 */
.hidden {
  display: none;
}

.mdl-menu__item {
  cursor: pointer;
  padding: 8px 16px;
  border: 1px solid #eee;
  margin: 4px 0;
  width: 200px;
}

button {
  margin: 10px 0;
  padding: 8px 16px;
}
</style>

<script>
// JavaScript逻辑
const stepCountEl = document.getElementById('step-count');
const userItems = document.querySelectorAll('#user .mdl-menu__item');
const nextBtn = document.getElementById('next-btn');
const actionList = document.getElementById('action');

// 第一步：处理用户选择的li点击事件
userItems.forEach(item => {
  item.addEventListener('click', () => {
    // 获取选中的值（这里可以根据需求做后续处理，比如存到变量里）
    const selectedUser = item.textContent;
    console.log('选中的用户：', selectedUser);
    
    // 显示下一个button控件
    nextBtn.classList.remove('hidden');
    // 更新步骤数
    stepCountEl.textContent = parseInt(stepCountEl.textContent) + 1;
  });
});

// 第二步：处理button点击事件
nextBtn.addEventListener('click', () => {
  // 显示下一个控件（这里是action列表）
  actionList.classList.remove('hidden');
  // 更新步骤数
  stepCountEl.textContent = parseInt(stepCountEl.textContent) + 1;
  
  // 如果还有后续步骤，继续在这里添加逻辑即可
  // 比如给action列表的li添加点击事件，显示下一个控件，以此类推
});
</script>

关键逻辑解释 #

1. HTML结构：

   • 给需要分步显示的控件（button、第二个ul）添加了hidden类，初始状态下这些元素会被隐藏，只显示第一个用户列表和步骤数
   • 保留了你原有的step-count span和user列表，同时补充了后续的交互控件示例

2. CSS控制显示隐藏：

   • 定义.hidden类设置display: none，通过添加/移除这个类来控制元素的显示状态，这种方式比直接操作元素的style.display更易维护

3. JavaScript交互逻辑：

   • 首先获取所有需要操作的DOM元素
   • 给用户列表的每个li绑定点击事件：选中后显示下一步的button，同时把步骤数加1
   • 给button绑定点击事件：点击后显示下一个控件（这里是操作列表），再次更新步骤数
   • 如果还有更多步骤，只需要按照这个模式：给后续控件加hidden类，然后在前面的交互事件中移除类并更新步骤数即可

这样就能实现你想要的“一步一步显示控件，同时更新已完成步骤数”的效果啦～

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