欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js中ready()中函数和外面的区别

程序员文章站 2022-06-09 12:38:39
...

    今天测试jQuery Mobile的主题功能时,动态改变它的theme,出现总是没有更新主题效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0-beta.1.min.css" />
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0-beta.1.min.js"></script>

<script type="text/javascript">
	
	$(function(){
		
		var selTheme = $("#selTheme");
		selTheme.bind("change",function(){
			
			if(selTheme.val()!=""){
				$.cookie("StrTheme",selTheme.val(),{
					path:"/weixin",
					expires:1
				})
				window.location.reload();
			}
		});
		
		
		
	});
	/* 
		该段代码放在ready里面,则只有第一次生效,因为放在ready里面就意味着要等DOM加载完成在执行,
		此时页面已经加载了一种主题,再执行该段代码更换另一宗主题,但是没有刷新,所以页面在显示上就没有变化过来
	 */

	if($.cookie("StrTheme")){
		alert($.cookie("StrTheme"));
		$.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
	}
	
</script>

<base>
<title>jqueryMobile_3</title>
</head>
<body>
	<!-- 页面一 -->
	<div data-role="page" id="page1">
		
		<div data-role="header">
			<h1>雾烨</h1>
			<div data-role="navbar">
				<ul>
					<!-- 添加样式, class="ui-btn-active" 表示该按钮是活动的 -->
					<li><a href="index.html" data-iconpos="top" data-icon="search">Search</a></li>
					<li><a href="index.html" data-iconpos="top" data-icon="home">Home</a></li>
					<li><a href="jqueryMobile_4.html" data-iconpos="top" data-icon="info">More</a></li>
				</ul>
			</div>
		</div> 
		
		<div data-role="content">
			<select id="selTheme" data-native-menu="false">
				<option value="">选择主题</option>
				<option value="a">主题a</option>
				<option value="b">主题b</option>
				<option value="c">主题c</option>
				<option value="d">主题d</option>
				<option value="e">主题e</option>
			</select>
		</div>
			
		<div data-role="footer">
			<h2>©2015     ripin.com test</h2>
		</div>

	</div>
	
</body>
</html>

 将该段代码

if($.cookie("StrTheme")){
    alert($.cookie("StrTheme"));
    $.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
}
		

放到ready()外,问题解决,此刻才深刻理解到先加载完DOM再 执行ready中的函数的意思。这里的主题无效也是因为已经加载完dom内容,页面显示已经完成,此时主题设置了,但是没有刷新,所以页面显示上也就无效。