如何实现单个li元素单选切换样式？

问题核心 #

需要实现点击LI元素时为其添加选中类（用于修改边框颜色），且同一时间仅能有一个LI处于选中状态——点击其他LI时自动移除之前选中项的类。

原代码问题分析 #

1. 第一段代码：仅切换当前点击元素的类，未处理其他已选中的元素，导致出现多选情况。
2. 第二段代码：document.querySelector(".myUl li")只会匹配页面中第一个LI元素，而非当前已选中的项，因此无法正确移除之前选中元素的类。

正确实现方案 #

1. 必要的CSS样式

先定义选中类的边框样式，确保视觉反馈生效：

.repoFolder {
  padding: 10px;
  border: 2px solid transparent; /* 默认透明边框，切换更平滑 */
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.my-class {
  border-color: #007bff; /* 选中时的蓝色边框，可自定义 */
}

2. 修正后的JS代码

优化DOM查询逻辑，同时实现单选逻辑：

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",
    }
];

// 优化：仅查询一次UL元素，避免循环内重复DOM查询
const list = document.querySelector('.myUl');
staff.forEach(({ id, name, email, image }) => {
    list.innerHTML += `<li class="repoFolder" data-value="${id}">
        <div class="doc-photo">
            <img src="${image}" />
        </div>
        <div class="doc-infos">
            <p class="name">${name}</p>
            <p class="mail">${email}</p>
        </div>
    </li>`;
});

const items = document.querySelectorAll(".myUl li");

// 为每个LI绑定点击事件
items.forEach(item => {
    item.addEventListener('click', function() {
        // 第一步：移除所有LI的选中类
        items.forEach(i => i.classList.remove('my-class'));
        // 第二步：给当前点击的LI添加选中类
        this.classList.add('my-class');
        // 打印当前选中的ID（可选）
        console.log('选中ID：' + this.getAttribute('data-value'));
    });
});

可选：支持取消选中当前项

如果需要点击已选中的LI时取消选中状态，可修改点击事件逻辑：

items.forEach(item => {
    item.addEventListener('click', function() {
        const isCurrentlySelected = this.classList.contains('my-class');
        // 先移除所有选中类
        items.forEach(i => i.classList.remove('my-class'));
        // 若之前未选中，则添加选中类；否则保持取消状态
        if (!isCurrentlySelected) {
            this.classList.add('my-class');
            console.log('选中ID：' + this.getAttribute('data-value'));
        } else {
            console.log('取消选中');
        }
    });
});

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