文章目錄
論 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>