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

论 js中:(class、id)出乎意料的优先级?- 案例篇

程序员文章站 2022-07-10 10:19:22
...


论 js中:(class、id)出乎意料的优先级?- 案例篇

  • 最近忙着做SEO自动化推文,项目中,涉及多个页面的AJAX异步请求。
  • 艳遇过程中相当凄惨与坎坷。具体什么情况,细细道来。

我都都不相信我还是个程序员!


看图说明 · 案例场景:

论 js中:(class、id)出乎意料的优先级?- 案例篇


重要代码 · 解析 · 提示

  • js执行for循环的时候,因为AJAX渲染的DOM树(换行,引号,等等)书写不规范问题,导致生成的DOM中对应的参数左侧或右侧或两侧出现空格。导致提交请求的时候报错。

/*代码片段1 */

	//逻辑重调:终止引发的问题
	var tagstr="";
	console.log("keyword=="+keyword);
	for(var i=0;i<catedata[eq].children.length;i++){
		tagstr += '<a class="mui-btn gzbg gzbg_'   /*提示:抓取此处的class.gzbg_*/
			+ catedata[eq].children[i].id
			+ ' " οnclick="tagFun('
			+ catedata[eq].children[i].id
			+','
			+" 'tag',"
			+ eq
			+" ,' " 
			+ keyword
			+" ') "
			+' " id="gzbg_'
			+ catedata[eq].children[i].id
			+' ">'
			+ catedata[eq].children[i].name
			+'</a>';
	}
	//tag拼接渲染
	$('#tagjsp').html(tagstr);


/*代码片段2*/

str = '<ul class="mui-table-view article-ul">'
		+str 
		+'</ul>';
		//list拼接渲染
		$('#article-ul').html(str);
		
		console.log(id)
		$(".gzbg").removeClass("on");
		$(".gzbg_"+id).addClass("on");  /* 提示: 抓取成功 */
		/*$("#gzbg_"+id).addClass("on"); //提示: 抓取失败 */
	

class / idjs中抓取的优先级【代码点评 · 如上述代码片段内 “提示”】

本案例发现,优先级中:id没用,class=tablist_…有用。
后面js点击的时候,操作.class就能改变背景色。
(具体参考如下截图(正常效果),及附件代码)

论 js中:(class、id)出乎意料的优先级?- 案例篇

论 js中:(class、id)出乎意料的优先级?- 案例篇


附件:

案例 · 全部代码:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="static.docs.v1.1/plugins/mui/css/mui.min.css" rel="stylesheet" />
		<link href="static.docs.v1.1/plugins/swiper/swiper.min.css" rel="stylesheet" />
		<!--footer-->
		<link rel="stylesheet" type="text/css" href="static.docs.v1.1/css/index.mui.ej.css"/>
		<link href="static.docs.v1.1/font.old/iconfont.css" rel="stylesheet" />
		<style type="text/css">.mui-btn.mui-icon{line-height: 40px;}</style>
		<!--旧版新升级-->
		<!--<link rel="stylesheet" type="text/css" href="static.docs.v1.1/plugins/alifonts/icons.css"/>-->
		<!--旧版新升级-->
			<style type="text/css">
				.tagjsp{display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;}
			</style>
	</head>

	<body>
		<!--头部导航区域-->
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left" id="gzname">
				锅炉作业
			</a>
		    <!--<h1 class="mui-title">锅炉作业</h1>-->
 	    	<a class="mui-btn mui-btn-blue mui-btn-link mui-pull-right " id="l-judge" href="#topPopover"><a>
 	    	<!--<a class="mui-btn mui-btn-blue mui-btn-link mui-pull-right ">已登录<a>-->
		</header>
		<!--底部tabs区域-->
		<nav class="mui-bar mui-bar-tab" id="footer">
			<ul class="mui-table-view mui-grid-view">
		       <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2 mui-active">
		        	<a href="javascript:;">
	                    <span class="iconfont icon-shouye"></span>
	                    <div class="mui-media-body">首页</div>
		        	</a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
		        	<a href="http://www.tf110.cn/tf/test/goTest.do">
	                    <span class="iconfont icon-kaoshi"></span>
	                    <div class="mui-media-body">模拟考试</div>
		        	</a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2" style="text-align: center;overflow: visible;">
		        	<div style="overflow: visible; margin-top: -30px;">
		        		<a class="viplink" href="">
			        		<span class="iconfont  tf-vip"><span class="icon-code">&#xe7af;</span></span>
		                    <div class="mui-media-body vipstudy">VIP学习</div>
			        	</a>
		        	</div>			        	
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
		        	<a href="http://www.tf110.cn/tf/test/goPractice.do?model=SX&start=t">
	                    <span class="iconfont icon-tiku"></span>
	                    <div class="mui-media-body">全真题库</div>
		        	</a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
		        	<a href="personal.html">
	                    <span class="iconfont icon-gerenzhongxin"></span>
	                    <div class="mui-media-body">个人中心</div>
		        	</a>
		        </li>
			</ul>
		</nav>
		<!--主体区域 开始-->
		<div class="mui-content">
			<!--轮播组件-->
			<div class="lunbo">
				<!-- Swiper -->
				  <div class="swiper-container swiper-container1">
				    <div class="swiper-wrapper">
				      <div class="swiper-slide swiper-slide1"><img src="static.docs.v1.1/images.old/banner1.png"/></div>
				      <div class="swiper-slide swiper-slide1"><img src="static.docs.v1.1/images.old/banner2.png"/></div>
				      <div class="swiper-slide swiper-slide1"><img src="static.docs.v1.1/images.old/banner3.png"/></div>
				      <div class="swiper-slide swiper-slide1"><img src="static.docs.v1.1/images.old/banner4.jpg"/></div>
				    </div>
				    <!-- Add Pagination -->
				    <div class="swiper-pagination" id="swp-point1"></div>
				  </div>	
			</div>
			
			<!--4x宫格-->
			<div class="mui-content-padded ej-content-padded">
				<ul class="mui-table-view mui-grid-view mui-grid-9 tf-newtabs">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ej-col-per-5"><a href="">
		                    <span class="mui-icon tf-icon  icon-zscx"></span>
		                    <div class="mui-media-body">证书查询</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ej-col-per-5"><a href="">
		                    <span class="mui-icon  tf-icon icon-bkzn"></span>
		                    <div class="mui-media-body">报考指南</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ej-col-per-5"><a href="">
		                    <span class="mui-icon  tf-icon icon-mryl"></span>
		                    <div class="mui-media-body">每日一练</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ej-col-per-5"><a href="">
		                    <span class="mui-icon  tf-icon icon-znzj"></span>
		                    <div class="mui-media-body">智能组卷</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ej-col-per-5"><a href="">
		                    <span class="mui-icon  tf-icon icon-scll"></span>
		                    <div class="mui-media-body">实操理论</div></a></li>
		        </ul>
		        <!--更多-->
		        <ul class="mui-table-view bfnone" style="border-radius: 0 0 5px 5px;">
					<li class="mui-table-view-cell mui-collapse tf-clpse">
						<a class="m-collapse-open" href="#"><span>更多<i class="arr-up"></i></span></a>
						<a class="m-collapse-close" href="#"><span>收起<i class="arr-down"></i></span></a>
						<!--折叠部分-->
						<div class="mui-collapse-content" style="border-radius: 0 0 5px 5px;">
							<!--更多功能-->
							<div class="tf-clpse-title">
								<h4 class="tf-clpse-h4">更多功能</h4>
								<a class="tf-clpse-link" href="">切换考试</a>
							</div>
							<p class="tf-clpse-grid">
								<a class="tf-clpse-col-3" href="">考试报名</a>
								<a class="tf-clpse-col-3" href="">证件查询</a>
								<a class="tf-clpse-col-3" href="">报考指南</a>
								<a class="tf-clpse-col-3" href="">报考条件</a>
								<a class="tf-clpse-col-3" href="">考试大纲</a>
								<a class="tf-clpse-col-3" href="">政策法规</a>
								<a class="tf-clpse-col-3" href="">热门话题</a>
								<a class="tf-clpse-col-3" href="">报考答疑</a>
							</p>
							<!--试题资料-->
							<div class="tf-clpse-title">
								<h4 class="tf-clpse-h4">试题资料</h4>
							</div>
							<p class="tf-clpse-grid">
								<a class="tf-clpse-col-3" href="">课件讲义</a>
								<a class="tf-clpse-col-3" href="">全真题库</a>
								<a class="tf-clpse-col-3" href="">模拟考试</a>
								<a class="tf-clpse-col-3" href="">实操理论</a>
							</p>
							<!--经验分享-->
							<div class="tf-clpse-title">
								<h4 class="tf-clpse-h4">经验分享</h4>
							</div>
							<p class="tf-clpse-grid">
								<a class="tf-clpse-col-3" href="">考试技巧</a>
								<a class="tf-clpse-col-3" href="">考试加油站</a>
								<a class="tf-clpse-col-3" href="">答疑精华</a>
								<a class="tf-clpse-col-3" href="">报考答疑</a>
							</p>
						</div>
					</li>
				</ul>
		        
		        
			</div>
			
	        <!--报考指南、行业资讯-->
	        <!--新闻 · 选项卡-->
	        <div class="new-tabs-item">
	        	<!--选项卡-->
				<div style="">
					<div id="segmentedControl-1" class="mui-segmented-control mui-segmented-control-inverted sc-tabs">
						<a class="mui-control-item category mui-active" onclick="categoryFun(26,'category',0,'高压电工')" id="category_26">报考指南</a>
						
					</div>
				</div>
				<!--文章列表-->
				<div id="item1" class="mui-control-content mui-active">
					<!--分类导航-->
					<div class="mui-card scroll-gz" style="border-radius: 0;margin: 0;box-shadow:none;width: 100%;">
						<div class="mui-card-footer overflw-x tagjsp" id="tagjsp" style="">
							<a class="mui-btn gzbg" onclick="tagFun(28,'tag',0,'高压电工')" id="gzbg_28">考试经验</a>   
						</div>
					</div>
					<!--列表-->
					<div id="article-ul"></div>
				</div>
				
				<!--文章列表-->
				<!--<div id="item1" class="mui-control-content mui-active">
					<ul class="mui-table-view article-ul">
						<li class="mui-table-view-cell mui-media">
							<a href="">
								<div class="mui-media-object mui-pull-left ar-img" style="background: url(static.docs.v1.1/images/article.jpg) no-repeat 0 0;background-size: 100% 100%;"></div>
								<div class="mui-media-body ar-title">
									<p>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell article-a-li">
							<a class="article-li-a" href="">
								<p>低压电工安全作业复习考点:操作过程注意事项</p>
								<p class="article-li-a-time">03月15日</p>
							</a>
						</li>
						<li class="article-a-li-more">
							<a class="mui-badge a-more" href="">查看全部</a>
						</li>
		        	</ul>
		    	</div>-->
		    </div>
	        <!--每日一练、智能组卷-->
	        <!--请拷贝上述栏目代码-->
			
			<!--热门活动、广告资源-->
			<div class="mui-card  tf-advimg-card">
				<div class="mui-card-header bfnone mui-card-media">
					<div class="clpse-title-img" style="background: url(static.docs.v1.1/images/clpse-title-rmhd.png) no-repeat 0 center;background-size: 84px auto;"></div>
				</div>
				<div class="mui-card-content  tf-advimg-content" style="padding: 0 15px;">
					<a href="" class="tf-advimg-link">
						<img src="static.docs.v1.1/images/advimg-4.jpg" alt="" width="100%">
					</a>
					<p class="tf-advimg-card-title"><a href="">来特服宝典注册,干货资料免费领,考题免费练!</a></p>
					<p class="tf-advimg-card-time">2020.03.20</p>
				</div>
				<div class="tf-advimg-footer">
					<p class="tf-advimg-fp">电工叉车考试高频考点、串联归纳、历年真题等~</p>
					<a class="btn-ui btn-ui-1" href="">立即注册</a>
				</div>
			</div>
			
			<!--免费资源-->
			<div class="mui-card  tf-advimg-card" style="padding-bottom: 10px;">
				<div class="mui-card-header bfnone mui-card-media">
					<div class="clpse-title-img" style="background: url(static.docs.v1.1/images/clpse-title-mfzy.png) no-repeat 0 center;background-size: 84px auto;"></div>
				</div>
				<div class="mui-card-content  tf-advimg-content" style="padding: 0 15px;">
					<div style="display: flex;flex: 1;">
						<a href="" class="tf-advimg-link tf-clpse-col-6" style="padding-right: 10px;">
							<h5 class="advimg-h5">每日一练</h5>
							<p style="color: #999999;font-size: 12px;">每天更新,解决一个知识点</p>
							<img src="static.docs.v1.1/images/advimg-mryl.jpg" alt="" width="100%">
						</a>
						<a href="" class="tf-advimg-link tf-clpse-col-6" style="padding-left: 10px;">
							<h5 class="advimg-h5">智能组卷</h5>
							<p style="color: #999999;font-size: 12px;">题型多样,随即组卷</p>
							<img src="static.docs.v1.1/images/advimg-znzj.jpg" alt="" width="100%">
						</a>
					</div>
				</div>
				<div style="padding-left: 85px;min-height: 100px;background: url(static.docs.v1.1/images/form.jpg) no-repeat 15px center;background-size: 60px auto;margin-top: 10px;">
					<div class="tf-advimg-footer" style="border: none;">
						<p class="p1">低压电工课件讲义</p>
						<p class="p2">精选备考资料,配套课件视频</p>
						<p class="p3">作者:特服宝典</p>
						<a class="btn-ui btn-ui-2" href="">开始学习</a>
					</div>
					
				</div>
			</div>
			
			<!--通过率预测-->
			<div class="mui-card  tf-advimg-card" style="background:#FFF url(static.docs.v1.1/images/beat.png) no-repeat right -6px;background-size: 100px 100px;">
				<div class="mui-card-header bfnone mui-card-media" style="">
					<div class="clpse-title-img" style="background: url(static.docs.v1.1/images/clpse-title-tglyc.png) no-repeat 0 center;background-size: 96px auto;"></div>
				</div>
				<div class="mui-card-content  tf-advimg-content" style="padding: 0 15px;">
					<div style="display: flex;flex: 1;padding-right: 80px;">
						<a href="" class="tf-advimg-link" style="padding-right: 10px;">
							<p style="color: #999999;font-size: 12px;">特服宝典提供为您专业的通过率测试服务,快来看看你的考试通过率究竟达到多少吧!</p>
						</a>
					</div>
				</div>
			</div>
			
			<!--考试经验、辅导精华-->
	        <!--新闻 · 选项卡-->
	        <div class="new-tabs-item">
	        	<!--选项卡-->
				<div style="">
					<div id="segmentedControl-2" class="mui-segmented-control mui-segmented-control-inverted sc-tabs">
						<a class="mui-control-item mui-active" href="#scnt1">考试经验</a>
						<a class="mui-control-item" href="#scnt2">辅导精华</a>
						<a class="mui-control-item" href="#scnt3">报考资讯</a>
						<a class="mui-control-item" href="#scnt4">考试大纲</a>
					</div>
				</div>
				<!--分类导航-->
				<div class="mui-card scroll-gz" style="border-radius: 0;margin: 0;box-shadow:none;width: 100%;">
					<div class="mui-card-footer overflw-x">
						<a class="mui-btn gzbg" href="">考试经验</a>
						<a class="mui-btn gzbg" href="">辅导精华</a>
						<a class="mui-btn gzbg on" href="">考试动态</a>
						<a class="mui-btn gzbg" href="">考试大纲</a>
						<a class="mui-btn gzbg" href="">考试时间</a>                
						<a class="mui-btn gzbg" href="">取证事项</a>                
						<a class="mui-btn gzbg" href="">复审查验</a>                 
					</div>
				</div>
				<!--文章列表-->
				<div id="scnt1" class="mui-control-content mui-active">
					<ul class="mui-table-view article-ul">
						<li class="mui-table-view-cell mui-media">
							<a href="">
								<div class="mui-media-object mui-pull-left ar-img" style="background: url(static.docs.v1.1/images/article-2.jpg) no-repeat 0 0;background-size: 100% 100%;"></div>
								<div class="mui-media-body ar-title">
									<p>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell article-a-li">
							<a class="article-li-a" href="">
								<p>低压电工安全作业复习考点:操作过程注意事项</p>
								<p class="article-li-a-time">03月15日</p>
							</a>
						</li>
						<li class="mui-table-view-cell article-a-li">
							<a class="article-li-a" href="">
								<p>低压电工安全作业复习考点:操作过程注意事项</p>
								<p class="article-li-a-time">03月15日</p>
							</a>
						</li>
						<li class="mui-table-view-cell article-a-li">
							<a class="article-li-a" href="">
								<p>低压电工安全作业复习考点:操作过程注意事项</p>
								<p class="article-li-a-time">03月15日</p>
							</a>
						</li>
						<li class="article-a-li-more">
							<a class="mui-badge a-more" href="">查看全部</a>
						</li>
		        	</ul>
		    	</div>
		    	<div id="scnt2" class="mui-control-content">
		    		<ul class="mui-table-view article-ul">
						<li class="mui-table-view-cell article-a-li">
							<a class="article-li-a" href="">
								<p>电工考试指南:该如何把握做题速度</p>
								<p class="article-li-a-time">03月15日</p>
							</a>
						</li>
						<li class="mui-table-view-cell article-a-li">
							<a class="article-li-a" href="">
								<p>电工考试指南:该如何把握做题速度</p>
								<p class="article-li-a-time">03月15日</p>
							</a>
						</li>
						<li class="mui-table-view-cell article-a-li">
							<a class="article-li-a" href="">
								<p>电工考试指南:该如何把握做题速度</p>
								<p class="article-li-a-time">03月15日</p>
							</a>
						</li>
						<li class="article-a-li-more">
							<a class="mui-badge a-more" href="">查看全部</a>
						</li>
		        	</ul>
		    	</div>
		    	<div id="scnt3" class="mui-control-content">
		    		scnt3
		    	</div>
		    	<div id="scnt4" class="mui-control-content">
		    		scnt4
		    	</div>
		    </div>
	        <!--每日一练、智能组卷-->
	        <!--请拷贝上述栏目代码-->
	        
	        <!--微信广告-->
	        <div class="adv-wx-img">
	        	<a href=""><img src="static.docs.v1.1/images/advimg-2.jpg"/></a>
	        </div>
			
			
			
			<!--补-->
			<!--<div style="height: 50px;"></div>-->
			
		</div><!--主体区域 结束-->
		
		<!--右上角“注册/登录”弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<!--<div class="mui-popover-arrow"></div>-->
			<div class="mui-form-content pop">
				<!--表单-->
				<form class="mui-input-group" name="theForm" method="post" action="http://www.tf110.cn:80/tf//mobilephone/login.do" id="theForm">
					<input type="hidden" id="CITYNAME" name="CITYNAME" value=""/>
					<div class="pop-title">你好,请登录 <button type="button" onclick="hideLoginBox()" class="mui-btn mui-btn-default mui-icon mui-icon-closeempty"><i class=""></i></button></div>
				    <div class="mui-input-row mt10">
				        <label class="iconfont icon-shouji"></label>
				    	<input type="text" class="mui-input-clear" id="USERNAME" name="USERNAME"  placeholder="请输入注册手机号" maxlength="20"  />
				    </div>
				    <div class="mui-input-row mt10">
				        <label class="iconfont icon-suo"></label>
				        <input type="password" class="mui-input-password" id="PASSWORD" name="PASSWORD" placeholder="请输入密码" maxlength="20" />
				    </div>
				    <div class="mui-input-row mt10 vcodebox after">
				        <label class="iconfont icon-yanzhengma"></label>
				    	<input type="text" class="mui-input-clear" placeholder="请输入验证码">
				    	<div class="imgcode-btn"  onclick="myReload()">
				    		<img src="http://www.tf110.cn:80/tf/PictureCheckCode" id="CreateCheckCode" width="65" height="34"/>
				    	</div>
				    </div>
				    <div class="mui-input-row mt10 forget">
				        <div class="pwdbox">
							<div id="pwdbox">
								<input onclick="savePaw();" id="saveid" value="checkbox" class="inp3" type="checkbox" checked="checked"><label for="saveid"></label> 记住密码
							</div>
							<a class="forgetpwd" href="http://www.tf110.cn:80/tf/mobilephone/tofoundpassword.do">忘记密码?</a>
						</div>
				    </div>
				    <div class="mui-button-row mt20">
				        <button type="button" class="mui-btn mui-btn-primary wd245" onclick="doLogin()">登录</button>
				    </div>
				    <div class="mui-button-row mt10">
				        <button type="button" class="mui-btn mui-btn-default wd245" onclick="doregister()">首次使用,请注册 ></button>
				    </div>
				</form>
				
				
			</div>
		</div>
		
		
<!--文章刷新-->
<script src="static.docs.v1.1/js/jquery.min.3.1.0.js"></script>
<script src="http://www.tf110.cn/tf/jsp/mobilephone/static.docs/js/jquery.cookie.js"></script>
<script src="http://www.tf110.cn/tf/jsp/mobilephone/static.docs/js/jquery.tips.js"></script>

		<script src="static.docs.v1.1/plugins/mui/js/mui.min.js"></script>
		<script src="static.docs.v1.1/plugins/swiper/swiper.min.js"></script>
    	<script src="static.docs.v1.1/plugins/swiper/TweenMax.min.js"></script>
		<script type="text/javascript">
			mui.init()
			// Initialize Swiper 
		    var swiper = new Swiper('.swiper-container1', {
			    slidesPerView:1.3,
			    spaceBetween: 25,
				centeredSlides: true,
			    pagination: {
			        el: '#swp-point1',
			        clickable: true,
			    },
			    autoplay:{
			    	delay:1500,
			    	stopOnLastSlide:false,
			    },
		    });
		    
  </script>
<script type="text/javascript">
	// 取消登录
	function hideLoginBox() {
		$("#topPopover").removeClass("mui-active");
		$("#topPopover").hide();
		$(".mui-backdrop.mui-active").remove();
	}
	
//	表单验证
	var msg1 = "";
	if (msg1 == "checkCodeError") {
		alert("请重新输入验证码进行登录。");
	}
	if (msg1 == "pwdCodeError") {
		alert("用户名或密码错误,请重新登录。");
	}  
	var msg = "";
	if(msg != null && msg != ""){
		if(msg == "needVerCode"){
			console.log("removeClass");
			$("#codehide").removeClass("disnone");
		}
	}
</script>
</body>
<script type="text/javascript" language="javascript">
	function doLogin() { 
        var myreg =/^((1[3-9][0-9])\d{8})$/;
		if($("#USERNAME").val()==""){
			$("#USERNAME").tips({
				side:3,
	            msg:'输入用户名',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#USERNAME").focus();
			return false;
		}else if($("#USERNAME").val().length != 11 || !myreg.test($("#USERNAME").val())){
			$("#USERNAME").tips({
				side:3,
	            msg:'用户名格式不正确',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#USERNAME").focus();
			return false;
		}
        if($("#PASSWORD").val()==""){
			$("#PASSWORD").tips({
				side:3,
	            msg:'请输入密码',
	            bg:'#AE81FF',
	            time:2
	        });
			$("#PASSWORD").focus();
			return false;
		} 
        if($("#codehide").hasClass("disnone")){
        	// 不显示验证码,就什么都不执行
        	console.log("hider");
        } else {
        	if($("#checkCode").val()==""){
 				$("#checkCode").tips({
 					side:3,
 		            msg:'请输入验证码',
 		            bg:'#AE81FF',
 		            time:2
 		        });
 				$("#checkCode").focus();
 				return false;
 			}   
        }
	       

        if($("#saveid").attr("checked")){
			$.cookie('USERNAME', $("#USERNAME").val(), { expires: 7 });
			$.cookie('PASSWORD', $("#PASSWORD").val(), { expires: 7 });
		}
           $("#theForm").submit();
       }
	
       function savePaw(){
			if(!$("#saveid").attr("checked")){
				/*$.cookie('USERNAME', '', { expires: -1 });*/
				$.cookie('PASSWORD', '', { expires: -1 });
				/*$("#USERNAME").val('');*/
				$("#PASSWORD").val('');
			}
		}
		jQuery(function(){
			var USERNAME = $.cookie('USERNAME');
			var PASSWORD = $.cookie('PASSWORD');
			if(typeof(USERNAME) != "undefined" && typeof(PASSWORD) != "undefined"){
				$("#USERNAME").val(USERNAME);
				$("#PASSWORD").val(PASSWORD);
				$("#saveid").attr("checked",true);
				$("#code").focus();
			}
		});
		function myReload() {  
   			 document.getElementById("CreateCheckCode").src = document  
            .getElementById("CreateCheckCode").src  
            + "?nocache=" + new Date().getTime();  
		}
  		function doregister(){
			window.location.href="http://www.tf110.cn:80/tf/mobilephone/doregister.do?genCode=";
  		}
  		function foundpassword(){
  			window.location.href="http://www.tf110.cn:80/tf/mobilephone/tofoundpassword.do";
  		}
  		
</script>
<script type="text/javascript">
var linkurl = 'http://192.168.0.109:8080/cmsarticle/getColumnArticles.do';
var tagurl = 'http://192.168.0.109:8080/cmsarticle/menu.do';
var articleurl = 'http://192.168.0.109:8080/cmsarticle/getLabelArticles.do';
window.onload = categoryFun(26,'category',0,"高压电工"); //参数1~3:id,栏目层级,文章显示初始化eq值
function categoryFun(id,type,eq,keyword){	
	var catedata=[];
	$.ajax({ 
		type:"get", //提交方式
		data:{ "id" : id,"keyWord": keyword}, //查询的参数
		url: linkurl, //提交的路径
		dataType:"json", //返回的类型  是Text文本
		success:function(data){
	//	        	console.log(data);
			if(data==0) {
				console.log("不可以使用");
			}else{
				//console.log("可以使用categoryFun");
				//获取需要的数据
				var group = data.data ;	
				var catedata  = data.menus[0].children ;		
				/*
				console.log(catedata[0].children)
				//catedata = JSON.stringify(catedata)
				console.log(catedata[eq].children.length)
				console.log(catedata[eq].children[0].name)
				console.log(catedata[eq].children[1].name)
				*/
				//	逻辑重调:终止引发的问题
				var tagstr="";
				console.log("keyword=="+keyword);
				for(var i=0;i<catedata[eq].children.length;i++){
					tagstr += '<a class="mui-btn gzbg gzbg_'   
						+ catedata[eq].children[i].id
						+ ' " οnclick="tagFun('
						+ catedata[eq].children[i].id
						+','
						+" 'tag',"
						+ eq
						+" ,' " 
						+ keyword
						+" ') "
						+' " id="gzbg_'
						+ catedata[eq].children[i].id
						+' ">'
						+ catedata[eq].children[i].name
						+'</a>';
				}
				//tag拼接渲染
				$('#tagjsp').html(tagstr);
				
				//文章list区域:拼接渲染
				var str = '';
				for(var i=0;i<group.length;i++){
					str += '<li class="mui-table-view-cell article-a-li">'
								+'<a class="article-li-a" 											href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
								+'<p>'+group[i].title_name+'</p>'
								+'<p class="article-li-a-time">'+getLocalTime(group[i].create_time)+'</p>'
								+'</a>'
								+'</li>';
				}				
				//增加查看全部
				if(group.length == 0){
					str="";
					str += '<li class="article-a-li-more">'
							+'<a class="mui-badge a-more">暂无数据</a>'
							+'</li>';
				} else {
					str += '<li class="article-a-li-more">'
							+'<a class="mui-badge a-more" href="">查看全部</a>'
							+'</li>';
				}			
							
				str = '<ul class="mui-table-view article-ul">'
					+str 
					+'</ul>';
				//list拼接渲染
				$('#article-ul').html(str);
			}
		}
	});
	
	//标签
	
    $.ajax({ 
        type:"get", //提交方式
        data:{ "id" : id,"keyWord": keyword}, //查询的参数
        url: tagurl, //提交的路径
        dataType:"json", //返回的类型  是Text文本
        success:function(data){
	        if(data==0) {
	            console.log("不可以使用");
	        }else{
		        //console.log("可以使用tag:categoryFun");
	            //获取需要的数据
		        var group = data.data[0].children;
//	        		alert(group)
		        //拼接字符串
			    var str2='';
			    //对数据做遍历,拼接到页面显示
			    
		        for(var i=0;i<group.length;i++){
		         	if(group[i].id==id){
		         		str2 += '<a class="mui-control-item mui-active" οnclick="categoryFun(' 
					        + group[i].id
					        +','
					        + " 'category',"
					        + i
							+" ,' " 
							+ keyword
							+" ') "
					        +' " id="category_'
					        + group[i].id
					        +' ">'
					        + group[i].name
					        +'</a>';
		         	} else {
		         		str2 += '<a class="mui-control-item" οnclick="categoryFun(' 
					        + group[i].id
					        +','
					        + " 'category',"
					        + i
							+" ,' " 
							+ keyword
							+" ') "
					        +' " id="category_'
					        + group[i].id
					        +' ">'
					        + group[i].name
					        +'</a>';
		         	}
		         	
		        }
		         //放入页面的容器显示
		        $('#segmentedControl-1').html(str2);
	        }
	    }
    });
}
function tagFun(id,type,eq,keyword){
	//标签
	$.ajax({ 
		type:"get", //提交方式
		data:{ "id" : id,"keyWord": keyword}, //查询的参数
		url: articleurl, //提交的路径
		dataType:"json", //返回的类型  是Text文本
		success:function(data){
			if(data==0) {
				console.log("不可以使用");
			}else{
			    //console.log("可以使用tagFun");
				//获取需要的数据
				var group = data.data;
		        console.log(group[0].content_id)
		        //文章list区域:拼接渲染
				var str = '';
				for(var i=0;i<group.length;i++){
					str += '<li class="mui-table-view-cell article-a-li">'
								+'<a class="article-li-a" 											href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/' + group[i].content_id+'.html">'
								+'<p>'+group[i].title_name+'</p>'
								+'<p class="article-li-a-time">'+getLocalTime(group[i].create_time)+'</p>'
								+'</a>'
								+'</li>';
				}			
				//增加查看全部
				if(group.length == 0){
					str="";
					str += '<li class="article-a-li-more">'
							+'<a class="mui-badge a-more">暂无数据</a>'
							+'</li>';
				} else {
					str += '<li class="article-a-li-more">'
							+'<a class="mui-badge a-more" href="">查看全部</a>'
							+'</li>';
				}	
				str = '<ul class="mui-table-view article-ul">'
					+str 
					+'</ul>';
				//list拼接渲染
				$('#article-ul').html(str);
				
				console.log(id)
				$(".gzbg").removeClass("on");
				$(".gzbg_"+id).addClass("on");
				/*
				//拼接字符串
				var str = '';
				//对数据做遍历,拼接到页面显示				 
				for (var j=0;j<group.children.length;j++) {
					if(group.children[j].id==id){
						str += '<a class="mui-btn gzbg on" οnclick="tagFun(' 
						+ group.children[j].id
						+','
						+" 'tag',"
						+ eq
						+") "
						+' " id="gzbg_'
						+ group.children[j].id
						+' ">'
						+ group.children[j].name
						+'</a>';
					} else {
						str += '<a class="mui-btn gzbg" οnclick="tagFun(' 
						+ group.children[j].id
						+','
						+" 'tag',"
						+ eq
						+") "
						+' " id="gzbg_'
						+ group.children[j].id
						+' ">'
						+ group.children[j].name
						+'</a>';
					}	
				}				
				//放入页面的容器显示
				$('#tagjsp').html(str);
	*/
			}
		}
	});
}
//转换日期格式
function getLocalTime(nS) {
	return new Date(parseInt(nS) ).toLocaleString().replace(/:\d{1,2}$/,' ');

}
</script>
</html>