JS实现无序列表点击单项高亮时对代码if条件的疑问

这个if块是实现单选题「同一时间仅一个选项高亮」效果的核心，逐段拆解逻辑：

• 你给答案区所有li选项都绑定了点击事件，点击任意选项都会触发下述判断流程
• if(answer.querySelector('.selected'))这行是做前置状态检查：扫描整个答案列表，查找是否存在已经携带selected类（即已被选中、处于高亮状态）的选项
  • 若检查到存在已选中项（if条件成立）：获取这个已选中的元素节点，移除它的selected类，取消该选项的高亮状态
  • 若没检查到已选中项（进入else分支）：说明当前还没有任何选项被选中，此时给当前点击的选项加上selected类，触发高亮效果

补充提示：你当前贴的代码存在逻辑缺陷。当已经有选中项时，点击新选项只会清除旧选项的选中状态，不会给新点击的选项添加selected类，实际使用时会出现「第二次点击无法选中新选项」的问题。要实现正常的单选切换效果，把添加选中类的逻辑挪到if/else判断外部即可，修正后参考代码如下：

function chooseAnswer(){
    answer.querySelectorAll('li').forEach((option)=> { 
        option.addEventListener('click',()=>{
            // 先清除所有已存在的选中状态
            const activeAnswer = answer.querySelector('.selected');
            if(activeAnswer){
                activeAnswer.classList.remove('selected');
            }
            // 无论之前有没有选中项，都给当前点击项添加选中样式
            option.classList.add('selected');
        })
    })
}

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