Uncaught TypeError: Cannot read property 'className' of undefined(主圖顯示不出來)
在clear_main[i].className = clear_main[i].className
? ? ? ?.replace('main-i_active', ' ');
這一行提示除了錯誤，然后整個主圖是空白的。
自己檢查了好幾遍仍不知道是哪里出了問題，還請有經(jīng)驗的大神能幫我看一下，十分感謝！
<body>
??<div?class="slider">
??????<!--0.修改?view->Template（關(guān)鍵字替換），增加template?id-->
??????<div?class="main">
??????????<div?class="main-i"?id="template_main">
??????????????<div?class="caption"?id="main_{{index}}">
??????????????????<h2>{{h2}}</h2>
??????????????????<h3>{[h3}}</h3>
??????????????</div>
??????????????<img?src="images/{{index}}.jpg"/>
??????????</div>
??????</div>
??????<div?class="ctrl"?id="template_ctrl">
??????????<a?class="ctrl-i"?id="ctrl_{{index}}"?href="javascript:switchSlider({{index}});"><img?src="images/{{index}}.jpg"/></a>
??????</div>
??????<script?type="text/javascript">
??????????//1.數(shù)據(jù)定義（實際環(huán)境中應(yīng)由后臺給出）
??????????var?data?=?[
??????????????{img:1,h1:'Creative',h2:'DUET'},
??????????????{img:2,h1:'Friendly',h2:'DEVIL'},
??????????????{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
??????????????{img:4,h1:'Insecure',h2:'HUSSLER'},
??????????????{img:5,h1:'Loving',h2:'REBEL'},
??????????????{img:6,h1:'Passionate',h2:'REBEL'},
??????????????{img:7,h1:'Crazy',h2:'FRIEND'}
??????????];
??????????//2.通用函數(shù)
??????????var?g?=?function(id)?{
??????????????if?(id.substr(0,?1)?==?'.')?{
??????????????????return?document.getElementsByClassName(id.substr(1));
??????????????}
??????????????return?document.getElementById(id);
??????????};
??????????//3.添加幻燈片
??????????function?addSliders()?{
??????????????//3.1獲取模版
??????????????var?tpl_main?=?g('template_main').innerHTML
??????????????????????.replace(/^\s*/,?'')
??????????????????????.replace(/\s*$/,?'');
??????????????var?tpl_ctrl?=?g('template_ctrl').innerHTML
??????????????????????.replace(/^\s*/,?'')
??????????????????????.replace(/\s*$/,?'');
??????????????//3.2定義最終輸出html的變量
??????????????var?out_main?=?[];
??????????????var?out_ctrl?=?[];
??????????????//3.3遍歷所有數(shù)據(jù)，構(gòu)建最終輸出的html
??????????????for(?var?i=0;?i<data.length;i++?)?{
??????????????????var?_html_main?=?tpl_main
??????????????????????????.replace(/{{index}}/g,data[i].img)
??????????????????????????.replace(/{{h2}}/g,data[i].h1)
??????????????????????????.replace(/{{h3}}/g,data[i].h2);
??????????????????var?_html_ctrl?=?tpl_ctrl
??????????????????????????.replace(/{{index}}/g,data[i].img);
??????????????????out_main.push(_html_main);
??????????????????out_ctrl.push(_html_ctrl);
??????????????}
??????????????//3.4把html回寫到對應(yīng)的dom里
??????????????g('template_main').innerHTML?=?out_main.join('?');
??????????????g('template_ctrl').innerHTML?=?out_ctrl.join('?');
??????????}
??????????//5.幻燈片切換
??????????function?switchSlider(n){
??????????????//5.1獲得要展現(xiàn)的幻燈片和控制按鈕dom
??????????????var?main?=?g('main_'+n);
??????????????var?ctrl?=?g('ctrl_'+n);
??????????????//5.2獲得所有幻燈片以及控制按鈕
??????????????var?clear_main?=?g('.main-i');
??????????????var?clear_ctrl?=?g('.ctrl-i');
??????????????//5.3清楚他們的active樣式
??????????????for(var?i=0;?i<clear_ctrl.length;i++)?{
??????????????????clear_main[i].className?=?clear_main[i].className
??????????????????????????.replace('main-i_active',?'?');
??????????????????clear_ctrl[i].className?=?clear_ctrl[i].className
??????????????????????????.replace('ctrl-i_active',?'?');
??????????????}
??????????????//5.4為當(dāng)前控制按鈕和幻燈片附加樣式
??????????????main.className?+=?'main-i_active';
??????????????ctrl.className?+=?'ctrl-i_active';
??????????}
??????????//4.何時處理幻燈片輸出
??????????window.onload?=?function?()?{
??????????????addSliders();
??????????????switchSlider(1);
??????????}
??????</script>
??</div>
2016-06-15
<div?class="slider"> ??????<!--0.修改?view->Template（關(guān)鍵字替換），增加template?id--> ??????<div?class="main"??id="template_main"> ??????????<div?class="main-i"??id="main_{{index}}"> ??????????????<div?class="caption"> ??????????????????<h2>{{h2}}</h2> ??????????????????<h3>{{h3}}</h3> ??????????????</div>仔細(xì)看這段代碼與你寫的有何不同！
2020-03-31
你好，我也遇到了一模一樣的問題…不過我沒打錯括號，不知道哪里出了問題啊?