基于API返回数据动态修改UVIndex元素class未生效问题

你的类名重置逻辑存在语法错误：Element.classList是只读的DOMTokenList类型对象，不支持直接用等号赋值字符串来覆盖类名，你写的uvIndex.classList = "btn btn-lg"这行代码不会生效，既没法把类名重置回基础样式，之前残留的等级类也清不掉，最终就会出现类名切换不符合预期的问题。

直接把重置类名的逻辑改成用可写的className属性即可，顺便把冗余的区间判断简化，还能兼容UVI大于11的极端场景：

function showUvIndex(data){
    const UVInumber = Math.round(data.current.uvi);

    // className是可写属性，直接赋值就能覆盖所有已有类，完成基础样式重置
    uvIndex.className = "btn btn-lg";

    if (UVInumber >= 11) {
        uvIndex.classList.add('extreme');
    } else if (UVInumber >= 8) {
        uvIndex.classList.add('very-high');
    } else if (UVInumber >= 6) {
        uvIndex.classList.add('high');
    } else if (UVInumber >= 3) {
        uvIndex.classList.add('moderate');
    } else {
        uvIndex.classList.add('low');
    }

    console.log(UVInumber);
};

如果你不想每次都全量覆盖class属性，避免误删元素上其他无关的类，也可以先移除所有旧的等级类再添加新的：

function showUvIndex(data){
    const UVInumber = Math.round(data.current.uvi);
    // 先清除所有可能存在的旧等级类
    uvIndex.classList.remove('extreme', 'very-high', 'high', 'moderate', 'low');
    // 补全基础类，已经存在的类add方法不会重复添加
    uvIndex.classList.add('btn', 'btn-lg');

    if (UVInumber >= 11) {
        uvIndex.classList.add('extreme');
    } else if (UVInumber >= 8) {
        uvIndex.classList.add('very-high');
    } else if (UVInumber >= 6) {
        uvIndex.classList.add('high');
    } else if (UVInumber >= 3) {
        uvIndex.classList.add('moderate');
    } else {
        uvIndex.classList.add('low');
    }

    console.log(UVInumber);
};

原来用数组includes判断区间的写法太冗余，紫外线指数是连续数值，直接用大小比较判断区间逻辑更清晰，还能覆盖API返回UVI大于11的极端情况，比硬编码枚举数值更稳妥。

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