Javascript JQuery.show（）和.hide（）工作不正常

在过去的两个小时里，我一直在努力让下面的代码正常工作，但运气不好。有人能看到我哪里有问题吗

片段：

<script>

$(document).ready(function(e) {
    $('.messageBox').hide();
    $('#color').text('');

    $('.color-select-orange').click(function(e) {
        $('.messageBox').show().delay(2000).hide();
        $('#color').text('Orange').show().delay(2000).hide();
    });

});

</script>

.messageBox{
高度：自动；
宽度：自动；
文本对齐：居中；
z指数：100；
填充：100px；
背景色：#222；
颜色：#fff；
字体系列：poppins；
字体大小：14px；
显示：块；
}
.messageBox跨度{
颜色：#fff；
字体大小：粗体；
字体系列：poppins；
字体大小：14px；
}
.客户{
高度：自动；
宽度：自动；
位置：固定；
顶部：10px；
左：0px；
字体大小：14px；
字体系列：poppins；
显示：内联块；
背景色：透明；
边框右下半径：10px；
边框右上角半径：10px；
光标：指针；
}
.主题{
高度：自动；
宽度：自动；
位置：相对位置；
字体大小：14px；
字体系列：poppins；
显示：内联块；
背景色：#222；
颜色：#777；
边框右上角半径：10px；
光标：指针；
}
.颜色选择{
高度：自动；
宽度：100px；
填充：20px；
字体大小：14px；
字体系列：poppins；
显示：内联块；
背景色：#333；
颜色：#777；
}
.颜色选择：悬停{
背景色：#222；
颜色：#fff；
}
.颜色选择表{
宽度：100%；
背景色：#222；
显示：内联块；
边缘顶部：10px；
}
.选择橙色{
高度：自动；
宽度：100%；
显示：内联块；
背景色：透明；
颜色：#ff6e00；
边界半径：5px；
边框：薄实线#222；
垫面：5px；
垫底：5px；
}
.颜色选择橙色：悬停{
背景色：#ff6e00；
颜色：#fff；
}
.颜色选择绿色{
高度：自动；
宽度：100%；
显示：内联块；
背景色：透明；
颜色：#9ad749；
边界半径：5px；
边框：薄实线#222；
垫面：5px；
垫底：5px；
}
。颜色选择绿色：悬停{
背景色：#9ad749；
颜色：#fff；
}
.颜色选择蓝色{
高度：自动；
宽度：100%；
显示：内联块；
背景色：透明；
颜色：#4589f3；
边界半径：5px；
边框：薄实线#222；
垫面：5px；
垫底：5px；
}
.颜色选择蓝色：悬停{
背景色：#4589f3；
颜色：#fff；
}

主题已成功更改为所选颜色*
主题

橙色

绿色

蓝色

jQuery的

show（）

和

hide（）

在默认情况下不设置动画，并且不支持

delay（）

，因为它们不向FX队列添加动画

当延迟不起作用时，元素会立即隐藏，并且在两秒钟内不可见

要使它们成为动画，必须传入一个数字，即使是零也可以

$（文档）.ready（函数（e）{
$（'.messageBox'）.hide（）；
$（“#颜色”）。文本（“”）；
$（'.color select orange'）。单击（函数（e）{
console.log（'ds'）
$（'.messageBox'）.show（）.delay（2000）.hide（0）；
$（'#color'）.text（'Orange'）.show（）.delay（2000）.hide（0）；
});
});
.messageBox{
高度：自动；
宽度：自动；
文本对齐：居中；
z指数：100；
填充：100px；
背景色：#222；
颜色：#fff；
字体系列：poppins；
字体大小：14px；
显示：块；
}
.messageBox跨度{
颜色：#fff；
字体大小：粗体；
字体系列：poppins；
字体大小：14px；
}
.客户{
高度：自动；
宽度：自动；
位置：固定；
顶部：10px；
左：0px；
字体大小：14px；
字体系列：poppins；
显示：内联块；
背景色：透明；
边框右下半径：10px；
边框右上角半径：10px；
光标：指针；
}
.主题{
高度：自动；
宽度：自动；
位置：相对位置；
字体大小：14px；
字体系列：poppins；
显示：内联块；
背景色：#222；
颜色：#777；
边框右上角半径：10px；
光标：指针；
}
.颜色选择{
高度：自动；
宽度：100px；
填充：20px；
字体大小：14px；
字体系列：poppins；
显示：内联块；
背景色：#333；
颜色：#777；
}
.颜色选择：悬停{
背景色：#222；
颜色：#fff；
}
.颜色选择表{
宽度：100%；
背景色：#222；
显示：内联块；
边缘顶部：10px；
}
.选择橙色{
高度：自动；
宽度：100%；
显示：内联块；
背景色：透明；
颜色：#ff6e00；
边界半径：5px；
边框：薄实线#222；
垫面：5px；
垫底：5px；
}
.颜色选择橙色：悬停{
背景色：#ff6e00；
颜色：#fff；
}
.颜色选择绿色{
高度：自动；
宽度：100%；
显示：内联块；
背景色：透明；
颜色：#9ad749；
边界半径：5px；
边框：薄实线#222；
垫面：5px；
垫底：5px；
}
。颜色选择绿色：悬停{
背景色：#9ad749；
颜色：#fff；
}
.颜色选择蓝色{
高度：自动；
宽度：100%；
显示：内联块；
背景色：透明；
颜色：#4589f3；
边界半径：5px；
边框：薄实线#222；
垫面：5px；
垫底：5px；
}
.颜色选择蓝色：悬停{
背景色：#4589f3；
颜色：#fff；
}

主题已成功更改为

*选定的颜色*
主题


橙色


绿色


蓝色
浏览器开发人员工具控制台中有错误吗？因为即使修复了明显的错误，代码段也不会运行-如果发布代码段，它至少应该是有效的语法-例如，javascript部分中有一个脚本标记，没有向代码段添加jQuery，发布的代码中没有swapStyleSheet函数。。。这些是明显的错误-什么是
swapStyleSheet
？swapStyleSheet函数在哪里定义？我想