函数没传 实参 第一个形参是 事件对象

test : funcition(userId){

}
此时的 useId 等于e

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>评论列表</title>
  6.     <link rel="stylesheet" href="css/index.css" />
  7.     <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  8. </head>
  9. <body>
  10.     <section class="comment-edit-bd J_commentEditBoard">
  11.         <div class="mask">
  12.             <div class="comment-wrap">
  13.                 <h3 class="hd">课程评价 - <strong>前端开发之JavaScript深度指南【JS++前端】</strong></h3>
  14.                 <a href="javascript:;" class="fa fa-times J_closeBtn"></a>
  15.                 <p class="tt">您觉得课程怎么样</p>
  16.                 <div class="comment-star J_stars">
  17.                     <i class="fa fa-star J_hoverStar active" data-count="1" data-title="差评！课程太差了，我要吐槽！"></i>
  18.                     <i class="fa fa-star J_hoverStar active" data-count="2" data-title="勉强中评！课程不满意"></i>
  19.                     <i class="fa fa-star J_hoverStar active" data-count="3" data-title="中评！课程一般"></i>
  20.                     <i class="fa fa-star J_hoverStar active" data-count="4" data-title="好评！课程还不错，继续保持！"></i>
  21.                     <i class="fa fa-star J_hoverStar active" data-count="5" data-title="五星好评！课程非常棒，点赞！"></i>
  22.                     <span class="star-label J_starTip">五星好评！课程非常棒，点赞！</span>
  23.                 </div>
  24.                 <div class="edit-txt-bd">
  25.                     <textarea class="edit-txt J_editTxt" placeholder="请尽可能详尽描述您的学习经历，例如学习成果、老师讲课风格、课程内容等" maxlength="1000"></textarea>
  26.                     <p class="txt-tip">
  27.                         <span class="txt-count J_txtCount">0</span>/1000
  28.                     </p>
  29.                 </div>
  30.                 <p class="comment-desc">不可少于15字。评价多于100字将有机会获得200积分奖励哦~</p>
  31.                 <button type="button" class="comment-btn submit J_submitBtn disabled" disabled="disabled">提交评论</button>
  32.             </div>
  33.         </div>
  34.     </section>
  35.     <section class="comment-bd">
  36.         <div class="hd">
  37.             <button type="button" class="comment-btn J_openBtn">立即评论</button>
  38.         </div>
  39.         <div class="score-bd">
  40.             <div class="comment-statistics">
  41.                 <span class="statistics-num J_statisticsNum">-</span>
  42.                 <p>好评度</p>
  43.             </div>
  44.             <div class="radio-tabs J_radioTabs">
  45.                 <label class="tab-radio cur" data-id="0">
  46.                     <i class="radio-icon"></i>
  47.                     <span class="radio-txt">全部评价(<span class="radio-count">0</span>)</span>
  48.                 </label>
  49.                 <label class="tab-radio" data-id="1">
  50.                     <i class="radio-icon"></i>
  51.                     <span class="radio-txt">好评(<span class="radio-count">0</span>)</span>
  52.                 </label>
  53.                 <label class="tab-radio" data-id="2">
  54.                     <i class="radio-icon"></i>
  55.                     <span class="radio-txt">中评(<span class="radio-count">0</span>)</span>
  56.                 </label>
  57.                 <label class="tab-radio" data-id="3">
  58.                     <i class="radio-icon"></i>
  59.                     <span class="radio-txt">差评(<span class="radio-count">0</span>)</span>
  60.                 </label>
  61.             </div>
  62.         </div>
  63.         <div class="comment-wrap J_commentList"></div>
  64.         <div class="comment-loading J_loading">
  65.             <i class="fa fa-spinner fa-spin"></i>
  66.         </div>
  67.         <div class="page-btn-wrap">
  68.             <div class="page-btn-box J_btnBox"></div>
  69.         </div>
  70.     </section>
  71.   <script type="text/html" id="J_itemTpl">
  72.         <div class="item-left">
  73.             <img src="http://imgtest.jsplusplus.com/avatar/{{avatar}}" class="user-avatar" width="40" height="40" alt="" />
  74.             <p class="user-name">{{nickname}}</p>
  75.         </div>
  76.         <div class="item-right">
  77.             <div class="star-list">
  78.                 <i class="fa fa-star {{isActive}}"></i>
  79.                 <i class="fa fa-star {{isActive}}"></i>
  80.                 <i class="fa fa-star {{isActive}}"></i>
  81.                 <i class="fa fa-star {{isActive}}"></i>
  82.                 <i class="fa fa-star {{isActive}}"></i>
  83.             </div>
  84.             <div class="comment-content">{{comment}}</div>
  85.             <div class="comment-uptime">{{uptime}}</div>
  86.         </div>
  87.   </script>
  88.   <script type="text/html" id="J_addCommentTpl">
  89.       <div class="add-comment-item">
  90.           <div class="comment-content">追加评论：<span>{{comment}}</span></div>
  91.           <div class="comment-uptime">{{uptime}}</div>
  92.       </div>
  93.   </script>
  94.   <script type="text/html" id="J_warningTip">
  95.       <div class="comment-msg">
  96.             <i class="fa fa-warning"></i>
  97.             <p class="msg-txt J_msgTxt">{{text}}</p>
  98.         </div>
  99.   </script>
  100.   <script src="js/utils.js"></script>
  101.   <script src="js/modules/index/comment_module.js"></script>
  102.     <script src="js/index.js"></script>
  103. </body>
  104. </html>

index.css

html{
    background-color: #F4F4F4;
}

body{
    margin: 0;
}

div,
section,
textarea{
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
strong{
    font-weight: normal;
    margin: 0;
}

a{
    text-decoration: none;
}

textarea,
button{
    border: none;
    outline: none;
    resize: none;
}

.comment-edit-bd{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}

.comment-edit-bd .mask{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.comment-edit-bd .comment-wrap{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -357.5px;
    margin-top: -229px;
    padding: 0 20px;
    border-top: 4px solid #23b8ff;
    width: 715px;
    height: 458px;
    background-color: #fff;
}

.comment-edit-bd .hd{
    height: 20px;
    margin-top: 10px;
    line-height: 20px;
    font-size: 14px;
    color: rgb(153, 153, 153);
}

.comment-edit-bd .fa-times{
    position: absolute;
    right: 16px;
    top: 10px;
    color: #999;
    font-size: 20px;
}

.comment-edit-bd .fa-times:hover{
    color: rgb(35, 184, 255);
}

.comment-edit-bd .tt{
    height: 24px;
    margin-top: 25px;
    line-height: 24px;
    text-align: center;
    color: #000;
    font-size: 18px;
}

.comment-edit-bd .comment-star{
    height: 25px;
    margin: 35px 0 0 100px;
    line-height: 25px;
    cursor: pointer;
}

.comment-edit-bd .comment-star .fa-star{
    font-size: 25px;
    margin-right: 24px;
    color: #cdcdcd;
}

.comment-edit-bd .comment-star .fa-star.active{
    color: #F4B43F;
}

.comment-edit-bd .comment-star .star-label{
    vertical-align: 3px;
    font-size: 14px;
    color: rgb(153, 153, 153);
}

.comment-edit-bd .edit-txt-bd{
    width: 534px;
    height: 129px;
    margin: 50px auto 0;
    border: 1px solid #cdcdcd;
}

.comment-edit-bd .edit-txt-bd .txt-tip{
    height: 20px;
    padding-right: 10px;
    line-height: 4px;
    color: #424242;
    text-align: right;
    font-size: 14px;
}

.comment-edit-bd .edit-txt{
    width: 100%;
    height: 109px;
    padding: 10px 12px 0;
    color: rgb(51, 51, 51);
    font-size: 14px;
}

.comment-edit-bd .comment-desc{
    width: 534px;
    height: 16px;
    margin: 7px auto 0;
    line-height: 16px;
    font-size: 12px;
    text-align: right;
    color: rgb(153, 153, 153)
}

.comment-btn{
    float: right;
    width: 120px;
    height: 44px;
    background-color: rgb(35, 184, 255);
    border-radius: 3px;
    color: rgb(255, 255, 255);
    font-size: 16px;
}

.comment-btn.submit{
    margin: 22px 71px;
}

.comment-btn.disabled{
    background-color: #ABDBFC;
}

.comment-bd{
    position: relative;
    width: 860px;
    min-height: 532px;
    margin: 100px auto;
    padding: 0 20px 20px;
    background-color: #fff;
}

.comment-bd .hd{
    height: 84px;
    padding: 20px 0;
}

.comment-bd .score-bd{
    height: 61px;
    padding: 10px 0;
    background-color: #f4f4f4;
    border: 1px solid #e5e5e5;
}

.comment-bd .score-bd .comment-statistics{
    float: left;
    width: 125px;
    height: 41px;
    border-right: 1px solid #e5e5e5;
    text-align: center;
    line-height: 22px;
}

.comment-bd .score-bd .statistics-num{
    display: block;
    color: #e85308;
    font-size: 32px;   
}

.comment-bd .score-bd .comment-statistics p{
    vertical-align: middle;
    font-size: 14px;
    color: #333;
}

.comment-bd .score-bd .radio-tabs{
    float: left;
    height: 21px;
    margin-top: 9px;
}

.comment-bd .score-bd .tab-radio{
    display: inline-block;
    height: 21px;
    margin-left: 30px;
    cursor: pointer;
}

.comment-bd .score-bd .tab-radio .radio-icon{
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #cdcdcd;
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align: -3.5px;
}

.comment-bd .score-bd .tab-radio .radio-icon:hover{
    border-color: rgb(35, 184, 255);
}

.comment-bd .score-bd .tab-radio.cur .radio-icon:before{
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background-color: rgb(35, 184, 255);
    border-radius: 50%;
}

.comment-bd .score-bd .tab-radio .radio-txt{
    color: #333;
    font-size: 14px;
}

.comment-bd .comment-wrap{
    margin-top: -1px;
}

.comment-bd .comment-item{
    position: relative;
    width: 820px;
    padding: 20px 20px 20px 80px;
    border-top: 1px solid #ddd;
}

.comment-bd .comment-item .item-left{
    position: absolute;
    top: 20px;
    left: 0;
    width: 80px;
    text-align: center;
}

.comment-bd .comment-item .item-left .user-avatar{
    border-radius: 50%;
    vertical-align: middle;
}

.comment-bd .comment-item .item-left .user-name{
    text-align: center;
    font-size: 14px;
    color: #333;
}

.comment-bd .comment-item .item-right .fa-star{
    font-size: 18px;
    margin-right: 5px;
    color: #cdcdcd;
}

.comment-bd .comment-item .item-right .fa-star.active{
    color: #F4B43F;
}

.comment-bd .comment-item .item-right .comment-content{
    margin-bottom: 10px;
    line-height: 21px;
    font-size: 16px;
    color: #333;
    word-wrap: break-word;
}

.comment-bd .comment-item .item-right .comment-uptime{
    line-height: 21px;
    font-size: 16px;
    color: #999;
}

.comment-bd .comment-item .add-comment-item{
    height: 73px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dashed #e5e5e5;
    font-size: 16px;
    color: #333;
}

.comment-bd .comment-item .add-comment-item .comment-content{
    margin-bottom: 10px;
}

.comment-bd .comment-item .add-comment-item .comment-uptime{
    color: #999;
} 

.comment-bd .comment-msg{
    height: 36px;
    margin: 170px 0;
    text-align: center;
}

.comment-bd .comment-msg .fa-warning{
    color: #D86E3F;
    font-size: 24px;
}

.comment-bd .comment-msg .msg-txt{
    display: inline;
    font-size: 18px;
    color: #999;
    vertical-align: 3px;
    margin-left: 8px;
}

.comment-loading{
    display: none;
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: #666;
}

.page-btn-wrap{
    height: 40px;
    font-size: 0;
}

.page-btn-wrap .page-btn-box{
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-btn-wrap .page-btn{
    display: inline-block;
    width: 64px;
    height: 38px;
    margin: 0 3px;
    border: 1px solid #dadada;
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    color: #333;
    font-size: 16px;
}

.page-btn-wrap a.page-btn:hover{
    background-color: #efefef;
}

.page-btn-wrap .page-btn-cur{
    border: 1px solid #23b8ff;
    background-color: #23b8ff;
    color: #fff;
}

.page-btn-wrap .dir-btn{
    display: inline-block;
    width: 78px;
    height: 38px;
    border: 1px solid #dadada;
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    color: #666;
    font-size: 16px;
}

.page-btn-wrap .dir-btn.disabled{
    background-color: #dadada;
    border: 1px solid #dadada;
    color: #c9c9c9;
}

.page-btn-wrap .dir-btn .fa{
    font-size: 23px;
}

.page-btn-wrap .points{
    font-size: 16px;
    color: #666;
}

.page-btn-wrap .dir-btn.prev-btn{
    margin-right: 3px;
}

.page-btn-wrap .dir-btn.next-btn{
    margin-left: 3px;
}

.page-btn-wrap a.dir-btn:hover{
    background-color: #efefef;
}

index.js

;(function(document, Comment){

  var oOpenBtn = $get('.J_openBtn')[0],
      oCloseBtn = $get('.J_closeBtn')[0],
      oStars = $get('.J_stars')[0],
      oEditTxt = $get('.J_editTxt')[0],
      oSubmitBtn = $get('.J_submitBtn')[0],
      oRadioTabs = $get('.J_radioTabs')[0],
      oBtnBox = $get('.J_btnBox')[0];

  var userId = 14;

  var init = function(){
    Comment.getComments({
      fieldId: 0,
      pageNum: 0
    });
    bindEvent();
  }

  function bindEvent(){
    oOpenBtn.addEventListener('click', Comment.openBoard, false);
    oCloseBtn.addEventListener('click', Comment.closeBoard.bind(Comment), false);
    oStars.addEventListener('mouseover', Comment.starsHover, false);
    oEditTxt.addEventListener('input', Comment.editInput.bind(Comment), false);
    oSubmitBtn.addEventListener('click', Comment.submitComment.bind(Comment, userId), false);
    oRadioTabs.addEventListener('click', Comment.radioTabClick.bind(Comment), false);
    oBtnBox.addEventListener('click', Comment.pageBtnClick.bind(Comment), false);
  }

  init();

})(document, initCommentModule);

comment_module.js

var initPageBtns = function(pages, curPage){
  var btnGroup = '',
      oBtnBox = $get('.J_btnBox')[0];

  render();

  function pageBtnTpl(type, num){
    switch(type){
      case 'btn':
        if(curPage == num){
          return '<span class="page-btn page-btn-cur">'+ num +'</span>';
        }else{
          return '<a href="javascript:;" class="page-btn" data-page="'+ num +'" data-field="btn">'+ num +'</a>';
        }
        break;
      case 'prev':
        if(curPage == 1){
          return '<span class="dir-btn prev-btn disabled"><i class="fa fa-angle-left"></i></span>';
        }else{
          return '<a href="javascript:;" class="dir-btn prev-btn" data-field="prev"><i class="fa fa-angle-left" data-field="prev"></i></a>';
        }
        break;
      case  'next':
        if(curPage == pages){
          return '<span class="dir-btn next-btn disabled"><i class="fa fa-angle-right"></i></span>';
        }else{
          return '<a href="javascript:;" class="dir-btn next-btn" data-field="next"><i class="fa fa-angle-right" data-field="next"></i></a>';
        }
        break;
      case 'points':
        return '<span class="points">...</span>';
        break;
    }
  }

  function makeBtnGroup(start, end){
    for(var i = start; i <= end; i++){
      btnGroup += pageBtnTpl('btn', i, curPage);
    }
  }

  function render(){
    btnGroup += pageBtnTpl('prev', pages, curPage);
    if(pages > 7){
      if(curPage < 3){
        makeBtnGroup(1, 3, curPage);
        btnGroup += pageBtnTpl('points');
        makeBtnGroup(pages - 1, pages, curPage);
      }else if(curPage >= 3 && curPage < 5){
        makeBtnGroup(1, curPage + 1, curPage);
        btnGroup += pageBtnTpl('points');
        makeBtnGroup(pages - 1, pages, curPage);
      }else if(curPage >= 5 && curPage < pages - 3){
        makeBtnGroup(1, 2, curPage);
        btnGroup += pageBtnTpl('points');
        makeBtnGroup(curPage - 1, curPage + 1, curPage);
        btnGroup += pageBtnTpl('points');
        makeBtnGroup(pages - 1, pages, curPage);
      }else if(curPage >= pages - 4 && curPage <= pages - 1){
        makeBtnGroup(1, 2, curPage);
        btnGroup += pageBtnTpl('points');
        makeBtnGroup(curPage - 1, pages, curPage);
      }else if(curPage == pages){
        makeBtnGroup(1, 2, curPage);
        btnGroup += pageBtnTpl('points');
        makeBtnGroup(curPage - 2, pages, curPage);
      }
    }else{
      makeBtnGroup(1, pages, curPage);
    }
    btnGroup += pageBtnTpl('next', pages, curPage);

    oBtnBox.innerHTML = btnGroup;
  }
}

var initCommentModule = (function(document, initPageBtns){
  var oCommentEditBoard = $get('.J_commentEditBoard')[0],
      oStarTip = $get('.J_starTip')[0],
      oStarItems = $get('.J_hoverStar'),
      oTxtCount = $get('.J_txtCount')[0],
      oSubmitBtn = $get('.J_submitBtn')[0],
      oEditTxt = $get('.J_editTxt')[0],
      oRadioTabItems = $get('.tab-radio'),
      oLoading = $get('.J_loading')[0],
      oCommentList = $get('.J_commentList')[0],
      oStatisticsNum = $get('.J_statisticsNum')[0],
      oBtnBox = $get('.J_btnBox')[0],

      warningTip = $get('#J_warningTip').innerHTML,
      itemTpl = $get('#J_itemTpl').innerHTML,
      addCommentTpl = $get('#J_addCommentTpl').innerHTML,

      t = null,
      starNum = 5,
      delayTime = 300,
      fieldId = 0,
      curPage = 1,
      pages = 0;

  var APIs = {
    submitComment: 'http://localhost/api_for_study/index.php/Comment/submitComment',
    getComments: 'http://localhost/api_for_study/index.php/Comment/getComments'
  }

  return {
      openBoard: function(){
      oCommentEditBoard.style.display = 'block';
      },

      closeBoard: function(){
          oCommentEditBoard.style.display = 'none';
      this._restoreBoardStatus();
      },

      starsHover: function(e){
      var e = e || window.event,
          tar = e.target || e.srcElement,
          tagName = tar.tagName.toLowerCase();

      if(tagName === 'i'){
          var thisIdx = [].indexOf.call(oStarItems, tar),
              thisStarItem = oStarItems[thisIdx],
              len = oStarItems.length,
              item;

          oStarTip.innerHTML = thisStarItem.getAttribute('data-title');
        starNum = thisStarItem.getAttribute('data-count');

          for(var i = 0; i < len; i++){
              item = oStarItems[i];

          if(i <= thisIdx){
            if(item.className.indexOf('active') === -1){
              item.className += ' active';
            }
          }else{
            item.className = 'fa fa-star J_hoverStar';
          }
          }
      }
      },

    editInput: function(){
        var val = trimSpace(oEditTxt.value),
            valLen = val.length;

      oTxtCount.innerHTML = valLen;

      if(valLen >= 15 && valLen <= 1000){
        this.submitBtnChange({
          txtChange: false,
          isDisabled: false
        });
      }else{
          this.submitBtnChange({
          txtChange: false,
          isDisabled: true
        });
      }
    },

    getComments: function(opt){
      var _self = this,
          fieldId = opt.fieldId,
          pageNum = opt.pageNum;

      xhr.ajax({
        url: APIs.getComments,
        type: 'POST',
        data: {
          field: fieldId,
          page: curPage - 1
        },
        success: function(data){
          var num = data.num,
              res = data.res,
              len = data.length;

          pages = data.pages;

          oLoading.style.display = 'block';

          t = setTimeout(function(){
            _self.setTabStarNum(num);
            oLoading.style.display = 'none';
            oCommentList.innerHTML = '';
            clearTimeout(t);

            if(len <= 0){
              _self._setWarningTip('暂无评论');
              return;
            }

            if(pages > 1){
              initPageBtns(pages, curPage);
            }else{
              oBtnBox.innerHTML = '';
            }

            oCommentList.appendChild(_self.renderList(res));
          }, delayTime);
        },

        error: function(){
          _self.setWarningTip('获取评论列表失败');
        }
      })
    },

    submitComment: function(userId){
        var val = oEditTxt.value,
          len = trimSpace(val).length,
          _self = this;

      if(len >= 15 && len <= 1000){
        xhr.ajax({
          url: APIs.submitComment,
          type: 'POST',
          data: {
            userId: userId,
            starNum: starNum,
            comment: val
          },
          success: function(data){
            var errorCode = data.error_code,
                oFirstCommentItem = oCommentList.getElementsByClassName('comment-item')[0];

            _self.submitBtnChange({
              txtChange: true,
              isDisabled: true
            });

            t = setTimeout(function(){
              _self.submitBtnChange({
                txtChange: false,
                isDisabled: false
              });

              clearTimeout(t);

              if(errorCode === '10010'){
                alert('您已对该课程做了评价，感谢您。');
                return;
              }

              if(data.res.is_add_comment == '0'){
                if(oFirstCommentItem){
                  oCommentList.insertBefore(_self._makeItem(data.res), oFirstCommentItem);
                }else{
                  oCommentList.innerHTML = '';
                  oCommentList.appendChild(_self._makeItem(data.res));
                }
              }else if(data.res.is_add_comment == '1'){
                _self._appendAddComment(data.res);
              }

              _self.setTabStarNum(data.num);
              _self._restoreBoardStatus();
              _self.closeBoard();
            }, delayTime);
          },

          error: function(){
            alert('对不起，提交评论失败，请重试');
          }
        });
      }
    },

    renderList: function(data){
      var frag = document.createDocumentFragment(),
          _self = this;

      data.forEach(function(elem){
        frag.appendChild(_self._makeItem(elem));
      });

      return frag;
    },

    _makeItem: function(data){
      var dom = document.createElement('div'),
          starNum = data.star_num,
          count = 0;

      dom.className = 'comment-item';
      dom.setAttribute('data-id', data.id);

      dom.innerHTML = itemTpl.replace(/{{(.*?)}}/gim, function(node, key){
        key === 'isActive' && count++;

        return {
          avatar: data.avatar,
          nickname: data.nickname,
          comment: data.comment,
          isActive: starNum >= count ? 'active' : '',
          uptime: getDateTime(data.uptime, 'date')
        }[key];
      });

      if(data.add_comment){
        dom.innerHTML += addCommentTpl.replace(/{{(.*?)}}/gim, function(node, key){
          return {
            comment: data.add_comment.comment,
            uptime: getDateTime(data.add_comment.uptime, 'date')
          }[key];
        });
      }

      return dom;
    },

    _appendAddComment: function(data){
      var oCommentItems = $get('.comment-item'),
          itemLen = oCommentItems.length,
          item,
          dataId;

      for(var i = 0; i < itemLen; i++){
        item = oCommentItems[i];
        dataId = item.getAttribute('data-id');

        if(dataId == data.add_id){
          item.innerHTML += addCommentTpl.replace(/{{(.*?)}}/gim, function(node, key){
          return {
            comment: data.comment,
            uptime: getDateTime(data.uptime, 'date')
          }[key];
        });
        }
      }
    },

    _restoreBoardStatus: function(){
      var starLen = oStarItems.length,
          item;

      for(var i = 0; i < starLen; i++){
        item = oStarItems[i];
        item.className += ' active';
      }

      oStarTip.innerHTML = oStarItems[4].getAttribute('data-title');
      starNum = oStarItems[4].getAttribute('data-count');

      oEditTxt.value = '';
      oTxtCount.innerHTML = '0';
      oSubmitBtn.innerHTML = '提交评论';
      this.submitBtnChange({
        txtChange: false,
        isDisabled: true
      });
    },

    radioTabClick: function(e){
      var e = e || window.event,
          tar = e.target || e.srcElement,
          className = tar.className;

      if(className == 'radio-txt' || className == 'radio-icon'){
        var oParent = tar.parentNode,
            len = oRadioTabItems.length,
            item;

        fieldId = oParent.getAttribute('data-id');

        for(var i = 0; i < len; i++){
          item = oRadioTabItems[i];
          item.className = 'tab-radio';
        }

        oParent.className += ' cur';
        curPage = 1;
        this.getComments({
          fieldId: fieldId, 
          page: curPage - 1
        });
      }
    },

    pageBtnClick: function(e){
      var e = e || window.event,
          tar = e.target || e.srcElement,
          field = tar.getAttribute('data-field');

      if(field){
        switch(field){
          case 'btn':
            curPage = parseInt(tar.getAttribute('data-page'));
            break;
          case 'prev':
            curPage -= 1;
            break;
          case 'next':

            curPage += 1;
            break;
        }
        this.getComments({
          fieldId: fieldId,
          page: curPage - 1
        });
      }
    },

    submitBtnChange: function(opt){
      var txtChange = opt.txtChange,
          isDisabled = opt.isDisabled;

      if(txtChange){
        oSubmitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
      }else{
        oSubmitBtn.innerHTML = '提交评论';
      }

      if(isDisabled){
        oSubmitBtn.className += ' disabled';
        oSubmitBtn.setAttribute('disabled', 'disabled');
      }else{
        oSubmitBtn.className = 'comment-btn submit J_submitBtn';
        oSubmitBtn.removeAttribute('disabled');
      }
    },

    setTabStarNum: function(arr){
      var oRadioCount = null;

      arr.forEach(function(elem, idx){
        oRadioCount = oRadioTabItems[idx].getElementsByClassName('radio-count')[0];
        oRadioCount.innerHTML = elem;
      });

      oStatisticsNum.innerHTML = arr[0] === '0' 
                               ? '-' 
                               : Math.ceil(arr[1] / arr[0] * 100) + '%';
    },

    _setWarningTip: function(text){
      oCommentList.innerHTML = warningTip.replace(/{{(.*?)}}/gim, text);
    }
  }
})(document, initPageBtns);