论 js中：（class、id）出乎意料的优先级？- 案例篇
程序员文章站
2022-07-10 10:19:22
...
文章目录
论 js中：（class、id）出乎意料的优先级？- 案例篇
- 最近忙着做SEO自动化推文，项目中，涉及多个页面的AJAX异步请求。
- 艳遇过程中相当凄惨与坎坷。具体什么情况，细细道来。
我都都不相信我还是个程序员！
看图说明 · 案例场景：
重要代码 · 解析 · 提示：
- 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 / id 在js中抓取的优先级：【代码点评 · 如上述代码片段内 “提示”】
本案例发现，优先级中：id没用，class=tablist_…有用。
后面js点击的时候，操作.class就能改变背景色。（具体参考如下截图(正常效果)，及附件代码）
附件：
案例 · 全部代码：
<!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"></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>
上一篇： 跨域请求方法
下一篇： vue调用公开接口出现跨域解决办法