1. jQuery 代码:
/**
* 回车键发布评论;
* 获取到页面已有的节点并进行相应内容替换;
*/
$('.commList').delegate('.replyBox .g-input', 'keypress', function (e) {
if (13 != e.keyCode) {
return;
}
var $ul = $(this).closest('ul');
var $li = $(this).closest('li');
var name = $(this).closest('.cont').find('.info .name').text();
var isReplyReply = $ul.hasClass('replies');
var html = '';
// 获取到页面已有的节点并进行相应内容替换;
var $reply = $($('#tempReply').html());
$reply.find('.text').text('回复 ' + name + ':' + $(this).val());
if (isReplyReply) {
html = $reply[0].outerHTML;
$ul.append(html);
} else {
if ($li.find('.replies').length) {
html = $reply[0].outerHTML;
$li.find('.replies').append(html);
} else {
html = '<ul class="replies">' + $reply[0].outerHTML + '</ul>';
$li.append(html);
}
}
$(this).closest('.replyBox').remove();
});
2. 被选择的节点
<script type="text/html" id="tempReply">
<li>
<div class="avatar"><img src="../images/pic-4.jpg" width="60" height="60" /></div>
<div class="cont">
<div class="info">
<a class="name" href="javascript:;">史蒂芬</a>
<span>2016-07-04 15:13:12</span>
<a class="reply" href="javascript:;">回复</a>
</div>
<div class="text"></div>
</div>
</li>
</script>