为何Auto模式的.heat-icon-parent无法继承其他模式的背景色？

我开发了一个模式切换功能，点击Cool、Heat、Fan、Dry、Auto模式时会切换对应颜色（Cool为蓝色、Heat为橙色等）。但遇到问题：点击Heat后其.heat-icon-parent为橙色，点击Auto时，Auto的.heat-icon-parent无法继承该橙色；点击Cool后切换为蓝色，Auto也无法继承该蓝色。

以下是我的代码：

// Variable to store the last clicked mode
var lastClickedMode = 'cool-mode';

// Mode Toggle
$('.heat-icon-parent').click(modeToggle);
$('.heat-icon-parent#cool-mode').addClass('clicked');
$('.heat-icon-parent').click(modeColor);

// Set the fill color based on the 'clicked' class for all SVG paths
$('.heat-icon-parent svg path').css('fill', function () {
    return $(this).closest('.heat-icon-parent').hasClass('clicked') ? '#ffff' : '#AEAEAE';
});


function modeToggle() {
    // Check if this element is already clicked
    var isClicked = $(this).hasClass('clicked');

    // Remove 'clicked' class from all elements
    $('.heat-icon-parent#cool-mode, .heat-icon-parent#heat-mode, .heat-icon-parent#fan-mode, .heat-icon-parent#dry-mode, .heat-icon-parent#auto-mode').removeClass('clicked');

    // Set the fill color based on the 'clicked' class for all SVG paths
    $('.heat-icon-parent svg path').css('fill', '#AEAEAE');

    // Toggle the 'clicked' class only if it wasn't already clicked
    if (!isClicked) {
        $(this).addClass('clicked');
        // Update the last clicked mode
        lastClickedMode = $(this).attr('id');
        // Set the fill color for the clicked element
        $(this).find('svg path').css('fill', '#ffff');
    }
}

function modeColor() {
    $('.heat-icon-parent').css('background', '');

    // Get the mode associated with the clicked element
    var mode = $(this).attr('id');

    // Update the background color based on the mode
    switch (mode) {
        case 'cool-mode':
            $('.heat-icon-parent.clicked').css('background', 'linear-gradient(141.67deg, #56aff3, #1c71c8)');
            break;
        case 'heat-mode':
            $('.heat-icon-parent.clicked').css('background', 'linear-gradient(141.67deg, #FF8D5D, #e67e22)');
            break;
        case 'fan-mode':
            $('.heat-icon-parent.clicked').css('background', 'linear-gradient(141.67deg, lime, green');
            break;
        case 'dry-mode':
            $('.heat-icon-parent.clicked').css('background', 'linear-gradient(141.67deg, #00BCB5, teal)');
            break;
        case 'auto-mode':
            // Inherit the color of the last clicked mode for auto-mode
            var lastClickedModeColor = $('.heat-icon-parent.clicked').css('background');
            $('.heat-icon-parent.clicked#auto-mode').css('background', lastClickedModeColor);
            break;
        default:
            // Default background color
            $('.heat-icon-parent.clicked').css('background', 'linear-gradient(141.67deg, #56aff3, #1c71c8)');
            break;
    }
}

问题原因 #

1. 事件执行顺序冲突：你给.heat-icon-parent绑定了两个点击事件modeToggle和modeColor，modeToggle会先移除所有元素的clicked类，再给当前点击元素添加。当点击Auto时，modeColor执行时，$('.heat-icon-parent.clicked')已经是Auto元素本身，而不是之前的模式元素，此时之前的模式元素已经没有clicked类，自然拿不到历史颜色。
2. Auto模式逻辑错误：原代码试图从DOM元素获取历史颜色，但此时DOM状态已经被modeToggle修改，无法拿到之前模式的背景色。
3. 语法错误：fan-mode的渐变代码缺少闭合括号，会导致样式失效。

修复方案 #

优化版代码（合并事件+统一颜色管理） #

把两个点击事件合并，用预设对象存储各模式颜色，避免重复代码和执行顺序问题：

// 存储最后点击的模式
var lastClickedMode = 'cool-mode';
// 统一管理各模式的背景色，方便维护
var modeColors = {
    'cool-mode': 'linear-gradient(141.67deg, #56aff3, #1c71c8)',
    'heat-mode': 'linear-gradient(141.67deg, #FF8D5D, #e67e22)',
    'fan-mode': 'linear-gradient(141.67deg, lime, green)',
    'dry-mode': 'linear-gradient(141.67deg, #00BCB5, teal)'
};

// 初始化默认状态
$('.heat-icon-parent#cool-mode').addClass('clicked');
updateModeStyles('cool-mode');

// 绑定单一点击事件，避免执行顺序冲突
$('.heat-icon-parent').click(function() {
    var isClicked = $(this).hasClass('clicked');
    var currentMode = $(this).attr('id');

    // 重置所有元素状态
    $('.heat-icon-parent').removeClass('clicked');
    $('.heat-icon-parent svg path').css('fill', '#AEAEAE');

    if (!isClicked) {
        $(this).addClass('clicked');
        $(this).find('svg path').css('fill', '#ffff');
        
        // 只有非Auto模式才更新历史记录
        if (currentMode !== 'auto-mode') {
            lastClickedMode = currentMode;
        }
        
        // 更新背景色
        updateModeStyles(currentMode);
    }
});

// 统一更新样式的函数
function updateModeStyles(currentMode) {
    $('.heat-icon-parent').css('background', '');
    var target = $('.heat-icon-parent.clicked');
    var bgColor;

    if (currentMode === 'auto-mode') {
        // Auto模式直接用历史模式的颜色
        bgColor = modeColors[lastClickedMode] || modeColors['cool-mode'];
    } else {
        // 其他模式用对应预设颜色
        bgColor = modeColors[currentMode] || modeColors['cool-mode'];
    }

    target.css('background', bgColor);
}

关键修复点 #

• 合并两个点击事件，避免执行顺序导致的DOM状态冲突
• 用modeColors对象统一管理颜色，减少重复代码，方便后续修改
• Auto模式直接从预设对象中获取历史模式的颜色，不再依赖DOM元素
• 修复了fan-mode的渐变语法错误

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