var len = this.value.length; var p = this.parentNode; var btn = p.getElementsByClassName('reply-btn')[0]; var word = p.getElementsByTagName('span')[0]; if (len == 0 || len>140) { btn.className = 'reply-btn'; }else{ btn.className = 'reply-btn reply-btn_active'; } word.innerHTML = len;
很抱歉。这个50k的文件主要是一些图片比较占空间，主要是为了方便大家查看代码索性打个包而已，其实里面的js我已经把其他功能部分的js代码删掉，只留下出现问题的代码。实际的代码大概100行左右。下次我会说明好情况的下面是js代码：(function () { var oItem = document.getElementsByClassName("box");
var oBoxCloseBtn = document.getElementsByClassName("box-close-btn"); //删除DOM节点
function removeDom (el) {
el.parentNode.removeChild(el);
} //回复按钮
function reply(box) {
var ul = box.getElementsByClassName('comment')[0];
var text = box.getElementsByClassName('input-area_expand')[0].value;
var comment = document.createElement('li');
comment.className = 'comment-item';
comment.innerHTML = '<img class="comment-head-img" src="head.jpg" alt="">'+
'<div class="comment-item-text">'+
'<a href="javascript:void(0)">我</a>'+
'<span>:'+ text +'</span><br>'+
'<span class="comment-time">2014-04-24 21:11</span>'+
'<a href="javascript:void(0)" class="comment-del">删除</a>'+
'<a href="javascript:void(0)" class="comment-praise">赞</a>';
'</div>'+
'</li>'
ul.appendChild(comment);
box.getElementsByClassName('input-area_expand')[0].value = '';
console.log(textarea.onblur);
textarea.blur();//这里在网页里面输入文字点击回复按钮之后为什么没有评论框onblur的收起来的效果？
} //回复别人的评论的功能
function commentReply (el) {
// console.log(el.parentNode.getElementsByClassName('other')[0].innerHTML)
var other = el.parentNode.getElementsByClassName('other')[0];
textarea.focus();//这里按下网页里的“回复”，焦点为什么放在下一个评论框？
textarea.value = '回复' + other.innerHTML + '：';
textarea.onkeyup;
}
for (var i = 0; i < oItem.length; i++) {
(function (j){
oItem[j].onmouseover = function () {
var oBtn = this.getElementsByClassName("box-close-btn")[0];
oBtn.className += " box-close-btn_show";
}
})(i);
(function (j){
oItem[j].onmouseout = function () {
var oBtn = this.getElementsByClassName("box-close-btn")[0];
oBtn.className = "box-close-btn";
}
})(i); oItem[i].onclick = function(event) {
e = event || window.event;
var el = e.target|| e.srcElement;
// console.log('鼠标点击元素类名；'+el.className);
switch (el.className){
case 'box-close-btn box-close-btn_show':
removeDom(el.parentNode );
break;
//"回复"别人的回复
case 'comment-reply':
commentReply(el);
break; case 'reply-btn reply-btn_active':
reply(el.parentNode.parentNode.parentNode);
break;
default:
return false;
}
} //onfucus 和 onblur 不支持冒泡，所以在上层元素设置事件处理程序没有用 var textarea = oItem[i].getElementsByTagName('textarea')[0];
textarea.onfocus = function() {
this.className = 'input-area input-area_expand'
this.parentNode.parentNode.getElementsByClassName('input-action')[0].className = 'input-action input-action_show';
this.value = this.value=='评论……' ? '' : this.value;
this.onkeyup();
} textarea.onblur = function() {
if (this.value=='') {
this.parentNode.parentNode.getElementsByClassName('input-action')[0].className = 'input-action';
this.className = 'input-area'
this.value = '评论……';
};
} textarea.onkeyup = function(e) {
var len = this.value.length;
var p = this.parentNode;
var btn = p.getElementsByClassName('reply-btn')[0];
var word = p.getElementsByTagName('span')[0];
if (len == 0 || len>140) {
btn.className = 'reply-btn';
}else{
btn.className = 'reply-btn reply-btn_active';
}
word.innerHTML = len;
};
}
})()