小白求助怎么解决这个小问题

leeryan123456 2019-04-17 10:50:36

上面第一个带回复的评论框是写死再界面上的,点击上面的那个评论框后会弹出回复的效果框,
我循环遍历后台数据填充到里面后下面的评论框点击之后没有任何效果

下面是加载的js代码
window.onload = function () {
var list = document.getElementById('list');
var boxs = list.children;
var timer;


function formateDate(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var mi = date.getMinutes();
m = m > 9 ? m : '0' + m;
return y + '-' + m + '-' + d + ' ' + h + ':' + mi;
}


function removeNode(node) {
node.parentNode.removeChild(node);
}


function praiseBox(box, el) {
var txt = el.innerHTML;
var praisesTotal = box.getElementsByClassName('praises-total')[0];
var oldTotal = parseInt(praisesTotal.getAttribute('total'));
var newTotal;
if (txt == '赞') {
newTotal = oldTotal + 1;
praisesTotal.setAttribute('total', newTotal);
praisesTotal.innerHTML = (newTotal == 1) ? '我觉得很赞' : '我和' + oldTotal + '个人觉得很赞';
el.innerHTML = '取消赞';
}
else {
newTotal = oldTotal - 1;
praisesTotal.setAttribute('total', newTotal);
praisesTotal.innerHTML = (newTotal == 0) ? '' : newTotal + '个人觉得很赞';
el.innerHTML = '赞';
}
praisesTotal.style.display = (newTotal == 0) ? 'none' : 'block';
}

/**
* 发评论
* @param box
* @param el
*/
function reply(box, el) {
var commentList = box.getElementsByClassName('comment-list')[0];
var textarea = box.getElementsByClassName('comment')[0];
var commentBox = document.createElement('div');
commentBox.className = 'comment-box clearfix';
commentBox.setAttribute('user', 'self');
commentBox.innerHTML =
'<img class="myhead" src="images/my.jpg" alt=""/>' +
'<div class="comment-content">' +
'<p class="comment-text"><span class="user">我:</span>' + textarea.value + '</p>' +
'<p class="comment-time">' +
formateDate(new Date()) +
'<a href="javascript:;" class="comment-praise" total="0" my="0" style="">赞</a>' +
'<a href="javascript:;" class="comment-operate">删除</a>' +
'</p>' +
'</div>'
commentList.appendChild(commentBox);
textarea.value = '';
textarea.onblur();
}

/**
*
* @param el
*/
function praiseReply(el) {
var myPraise = parseInt(el.getAttribute('my'));
var oldTotal = parseInt(el.getAttribute('total'));
var newTotal;
if (myPraise == 0) {
newTotal = oldTotal + 1;
el.setAttribute('total', newTotal);
el.setAttribute('my', 1);
el.innerHTML = newTotal + ' 取消赞';
}
else {
newTotal = oldTotal - 1;
el.setAttribute('total', newTotal);
el.setAttribute('my', 0);
el.innerHTML = (newTotal == 0) ? '赞' : newTotal + ' 赞';
}
el.style.display = (newTotal == 0) ? '' : 'inline-block'
}

/**
* 操作留言
* @param el
*/
function operate(el) {
var commentBox = el.parentNode.parentNode.parentNode;
var box = commentBox.parentNode.parentNode.parentNode;
var txt = el.innerHTML;
var user = commentBox.getElementsByClassName('user')[0].innerHTML;
var textarea = box.getElementsByClassName('comment')[0];
if (txt == '回复') {
textarea.focus();
textarea.value = '回复' + user;
textarea.onkeyup();
}
else {
removeNode(commentBox);
}
}

//把事件代理到每条分享div容器
for (var i = 0; i < boxs.length; i++) {

//点击
boxs[i].onclick = function (e) {
e = e || window.event;
var el = e.srcElement;
switch (el.className) {

//关闭分享
case 'close':
removeNode(el.parentNode);
break;

//
case 'praise':
praiseBox(el.parentNode.parentNode.parentNode, el);
break;

//
case 'btn':
reply(el.parentNode.parentNode.parentNode, el);
break

//
case 'btn btn-off':
clearTimeout(timer);
break;

//赞留言
case 'comment-praise':
praiseReply(el);
break;

//操作留言
case 'comment-operate':
operate(el);
break;
}
}

//评论
var textArea = boxs[i].getElementsByClassName('comment')[0];

//评论获取焦点
textArea.onfocus = function () {
this.parentNode.className = 'text-box text-box-on';
this.value = this.value == '评论...' ? '' : this.value;
this.onkeyup();
}

//评论失去焦点
textArea.onblur = function () {
var me = this;
var val = me.value;
if (val == '') {
timer = setTimeout(function () {
me.value = '评论...';
me.parentNode.className = 'text-box';
}, 200);
}
}

//评论按键事件
textArea.onkeyup = function () {
/*this.html("");*/
var val = this.value;
var len = val.length;
var els = this.parentNode.children;
var btn = els[1];
var word = els[2];
if (len <=0 || len > 140) {
btn.className = 'btn btn-off';
}
else {
btn.className = 'btn';
}
word.innerHTML = len + '/140';
}

}
}

下面是填充的那一块的代码




这里是我填充的代码模板ftl

<#list comments as list>
<div class="main">
<p class="txt">
<span class="user" id="user-Level">${list.user.nickName}</span>
<span class="txt" id="user-content">${list.content}</span>
</p>
<img class="pic" src="${list.user.headImgUrl}" alt=""/>
</div>
<div class="info clearfix">
<span class="time">${list.createTime?string('yyyy-MM-dd')}</span>
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>



<div class="comment-list">
<div class="comment-box clearfix" user="self">
<img class="myhead" src="images/my.jpg" alt=""/>
<div class="comment-content">
<p class="comment-text"><span class="user">我:</span>写的太好了。</p>
<p class="comment-time">
2014-02-19 14:36
<a href="javascript:;" class="comment-praise" total="1" my="0"
style="display: inline-block">1 赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
</div>
<div class="text-box">
<textarea class="comment" autocomplete="off"></textarea>
<button class="btn ">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</#list>


这是填充的js语句

$("#pills-comment-tab").click(function () {
$.get("/strategyCatalog/" + id, function (data) {

$(data).appendTo("#commentDetail")
})
});
...全文
53 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

39,084

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧