anki切换下一张卡片时选中颜色背景失效

Question

// 获取所有的 input 元素
var inputs = document.querySelectorAll('input');

// 初始时默认选中白色背景的复选框
inputs[0].checked = true;

function switchBackgroundColor(input) {
    // 获取所有定义的背景样式类名
    var backgroundClasses = ['original-bg', 'warm-countryside', 'vibrant-summer', 'fresh-ocean'];
    // 遍历所有 input 元素
    for (var i = 0; i < inputs.length; i++) {
        // 如果当前 input 元素是复选框且被选中
        if (inputs[i] === input && inputs[i].type === 'checkbox' && input.checked) {
            // 移除所有背景样式
            document.body.classList.remove(...backgroundClasses);
            // 根据选中的复选框添加对应的背景样式
            switch (input.id) {
                case'springCheckbox':
                    document.body.classList.add('original-bg');
                    break;
                case'summerCheckbox':
                    document.body.classList.add('warm-countryside');
                    break;
                case 'autumnCheckbox':
                    document.body.classList.add('vibrant-summer');
                    break;
                case 'winterCheckbox':
                    document.body.classList.add('fresh-ocean');
                    break;
            }
        }
    }
}

function switchBackgroundCustomColor(input) {
    // 如果随机颜色的复选框被选中
    if (input.checked && input.type === 'checkbox') {
        // 从已定义的背景样式类名中随机选择一个添加到 body 上
        var randomClass = backgroundClasses[Math.floor(Math.random() * backgroundClasses.length)];
        document.body.classList.remove(...backgroundClasses);
        document.body.classList.add(randomClass);
    }
}

// 确保颜色背景一旦设置就持续生效
window.addEventListener('load', function() {
    var storedBackgroundClass = localStorage.getItem('selectedBackgroundClass');
    if (storedBackgroundClass) {
        document.body.classList.add(storedBackgroundClass);
    }
});

function switchBackgroundColor(input) {
    // 获取所有定义的背景样式类名
    var backgroundClasses = ['original-bg', 'warm-countryside', 'vibrant-summer', 'fresh-ocean'];
    // 遍历所有 input 元素
    for (var i = 0; i < inputs.length; i++) {
        // 如果当前 input 元素是复选框且被选中
        if (inputs[i] === input && inputs[i].type === 'checkbox' && input.checked) {
            // 移除所有背景样式
            document.body.classList.remove(...backgroundClasses);
            // 根据选中的复选框添加对应的背景样式
            switch (input.id) {
                case'springCheckbox':
                    document.body.classList.add('original-bg');
                    localStorage.setItem('selectedBackgroundClass', 'original-bg');
                    break;
                case'summerCheckbox':
                    document.body.classList.add('warm-countryside');
                    localStorage.setItem('selectedBackgroundClass', 'warm-countryside');
                    break;
                case 'autumnCheckbox':
                    document.body.classList.add('vibrant-summer');
                    localStorage.setItem('selectedBackgroundClass','vibrant-summer');
                    break;
                case 'winterCheckbox':
                    document.body.classList.add('fresh-ocean');
                    localStorage.setItem('selectedBackgroundClass', 'fresh-ocean');
                    break;
            }
        }
    }
}

function switchBackgroundCustomColor(input) {
    // 如果随机颜色的复选框被选中
    if (input.checked && input.type === 'checkbox') {
        // 从已定义的背景样式类名中随机选择一个添加到 body 上
        var randomClass = backgroundClasses[Math.floor(Math.random() * backgroundClasses.length)];
        document.body.classList.remove(...backgroundClasses);
        document.body.classList.add(randomClass);
        localStorage.setItem('selectedBackgroundClass', randomClass);
    }
}