如何判断li是否选中？预约系统Next按钮功能问题求助

问题分析 #

你的代码主要有三个核心问题：

1. 选择器错误：document.querySelector(".myUl li")只会返回第一个匹配的li元素，无法遍历所有选项，导致判断逻辑只对第一个li生效
2. 逻辑冲突：重复定义myFunction2函数，并且多次绑定Next按钮的点击事件，导致代码执行混乱
3. 判断逻辑有误：逐个遍历li判断是否选中的方式会导致只要第一个li没选中就弹出alert，忽略其他可能选中的项

修复后的完整代码 #

const staff = [
    {
        "id": 1,
        "name": "Alex Rosetta",
        "email": "alexyrosetta@egmail.com",
        "image": "https://i.ibb.co/LJnNhRF/unsplash-279xIHymPYY.png",
    },
    {
        "id": 2,
        "name": "Maria July",
        "email": "mariajuly@egmail.com",
        "image": "https://i.ibb.co/3FhkswY/unsplash-IF9TK5UyKI.png",
    }
];
const services = [
    {
        "id": 1,
        "name": "Oral hygiene",
        "image": "https://i.ibb.co/XkRzNyr/Oval-2.png",
        "duration": "1 hour",
        "price": 50.00,
    },
    {
        "id": 2,
        "name": "Implants",
        "image": "https://i.ibb.co/Pr5m2kY/Oval-1.png",
        "duration": "1 hour 30 minutes",
        "price": 120.00,
    }
];

function getHTML(data) {
    return data.map(obj => {
        const { id, name, email, image } = obj;
        return `
      <li class="repoFolder" data-value="${id}">
        <div class="doc-photo">
          <img src="${image}" alt="Image of ${name}" />
        </div>
        <div class="doc-infos">
          <p class="name">${name}</p>
          <p class="mail">${email}</p>
        </div>
      </li>
    `;
    }).join('');
}

const list = document.querySelector(".myUl");
list.addEventListener('click', handleList);
list.insertAdjacentHTML('beforeend', getHTML(staff));

// 修正：直接获取.myUl下的所有li元素
const items = list.querySelectorAll('li');

function handleList(e) {
    const selectedLi = e.target.closest('li');
    if (selectedLi) {
        // 移除所有li的选中状态
        items.forEach(item => item.classList.remove('my-class'));
        // 给当前点击的li添加选中状态
        selectedLi.classList.add('my-class');
    }
}

const nextBtn = document.querySelector('.next-btn');
nextBtn.addEventListener("click", handleNextClick);

function handleNextClick() {
    // 直接检查是否存在选中的li（带my-class类）
    const hasSelectedItem = document.querySelector(".myUl li.my-class") !== null;
    
    if (hasSelectedItem) {
        // 切换容器显示状态
        const container1 = document.querySelector('.container');
        const container2 = document.querySelector('.container2');
        
        container1.classList.add('hide');
        container1.classList.remove('show');
        container2.classList.add('show');
        container2.classList.remove('hide');
    } else {
        alert("请先选择一个选项！");
    }
}

关键修改说明 #

• 修正选择器：将const items = list.querySelectorAll('.myUl li');改为const items = list.querySelectorAll('li');，因为list本身就是.myUl元素，无需重复指定父选择器
• 简化事件绑定：删除所有重复的函数定义和事件绑定，只保留一个handleNextClick函数处理Next按钮的点击逻辑
• 优化选中判断：用document.querySelector(".myUl li.my-class")直接检测是否存在选中项，无需遍历所有li，逻辑更高效简洁
• 代码复用优化：将getHTML函数中的staff.map改为data.map，后续可以直接传入services数据生成服务选项列表

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