JQuery .show()和.hide()不能正常工作

我一直试图让下面的代码工作在过去的2个小时没有运气。有人能看出我哪里有问题吗?

片段:

<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>

$(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();
    });		
});

.messageBox {
	height: auto;
	width: auto;
	
	text-align: center;
	
	z-index: 100;
		
	padding: 100px;
	
	background-color: #222;
	color: #fff;
	
	font-family: poppins;
	font-size: 14px;
	
	display: block;
}
.messageBox span {
	color: #fff;
	
	font-weight: bold;
	font-family: poppins;
	font-size: 14px;
}
.customiser {
	height: auto;
	width: auto;
	
	position: fixed;
		
	top: 10px;
	left: 0px;
	
	font-size: 14px;
	font-family: poppins;
	
	display: inline-block;
	
	background-color: transparent;
	
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	
	cursor: pointer;
}
.themes {
	height: auto;
	width: auto;
	
	position: relative;
	
	font-size: 14px;
	font-family: poppins;
	
	display: inline-block;
	
	background-color: #222;
	color: #777;
	
	border-top-right-radius: 10px;
	
	cursor: pointer;
}
.color-select {
	height: auto;
	width: 100px;
		
	padding: 20px;
	
	font-size: 14px;
	font-family: poppins;
	
	display: inline-block;
	
	background-color: #333;
	color: #777;
}
.color-select:hover {
	background-color: #222;
	color: #fff;
}
.color-select-table {
	width: 100%;
	
	background-color: #222;
	
	display: inline-block;
	
	margin-top: 10px;
}
.color-select-orange {
	height: auto;
	width: 100%;
	
	display: inline-block;
	
	background-color: transparent;
	color: #ff6e00;
	
	border-radius: 5px;
	border: thin solid #222;
	
	padding-top: 5px;
	padding-bottom: 5px;
}
.color-select-orange:hover {
	background-color: #ff6e00;
	color: #fff;
}
.color-select-green {
	height: auto;
	width: 100%;
	
	display: inline-block;
	
	background-color: transparent;
	color: #9ad749;
	
	border-radius: 5px;
	border: thin solid #222;
	
	padding-top: 5px;
	padding-bottom: 5px;
}
.color-select-green:hover {
	background-color: #9ad749;
	color: #fff;
}
.color-select-blue {
	height: auto;
	width: 100%;
	
	display: inline-block;
	
	background-color: transparent;
	color: #4589f3;
	
	border-radius: 5px;
	border: thin solid #222;
	
	padding-top: 5px;
	padding-bottom: 5px;
}
.color-select-blue:hover {
	background-color: #4589f3;
	color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to<br> <span id="color">*SELECTED_COLOUR*</span></div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme<br>
	
<div class="color-select-table">
	<div class="color-select-orange" onclick="swapStyleSheet('_scripts/default.css')">Orange</div><br>
    <div class="color-select-green" onclick="swapStyleSheet('_scripts/green.css')">Green</div><br>
    <div class="color-select-blue" onclick="swapStyleSheet('_scripts/blue.css')">Blue</div>
</div>
</div><!--END COLOR-SELECT-->
</div><!--END THEMES-->
  
</div><!--END OF CUSTOMISER-->

swapStyleSheet命令可以正常工作，但是#color的文本更改和.messageBox的显示更改不能正常工作。