（六）实践JavaScript之增加、删除评论

var commentTemplate = function(comment){
    var c = `
        <div class='class-comment-cell'>
            <span class='class-comment-content'>${comment.content}</span>
            <button class='class-comment-delete' data-id=${comment.id}>删除</button>
            <button class='class-comment-edit' data-id=${comment.id}>编辑</button>
        </div>
        <br>
    `
    return c
}

一、增加评论

和前面一个套路

var bindEventCommentAdd = function(){
    var weiboList = e('#id-weibo-list')
    log('增加评论')
    weiboList.addEventListener('click', function(event){
        var self = event.target
        // 这里不能加 .
        if (self.classList.contains('class-weibo-comment')){
            var weibo_id = self.dataset.id
            log('weibo_id是是是是是：', weibo_id)
            var commentinputcell = self.closest('.class-comment')
            var commentinput = commentinputcell.querySelector('.class-comment-input')
            var value = commentinput.value
            form = {
                content:value,
                weibo_id: weibo_id,
            }
            apicommentAdd(form, function(r){
                var comment = JSON.parse(r)
                insertComment(comment)
                commentinput.value = ''
            })
        }
    })
}

var apicommentAdd = function(form, callback){
    path = '/api/weibo/comment/add'
    ajax('POST', path, form, callback)
}

错误高发点：

• ... is null：很可能是class前面没加 .

二、删除评论

var bindEventCommentDelete = function(){
    var weiboList = e('#id-weibo-list')
    weiboList.addEventListener('click', function(event){
        var self = event.target
        if (self.classList.contains('class-comment-delete')){
            var comment_id = self.dataset.id
            apicommentDelete(comment_id, function(r){
                var comment = JSON.parse(r)
                self.parentElement.remove()
            })
        }
    })
}

var apicommentDelete = function(comment_id, callback){
    path = `/api/weibo/comment/delete?id=${comment_id}`
    ajax('GET', path, '', callback)
}

事件委托

三、修改评论

1.增加修改输入框和更新按钮

点击修改按钮，弹出修改输入框以及更新按钮。

var commenteditTempalte = function(self){
    var c = `
        <div class = 'class-comment-update-form'>
            <input class = 'class-comment-edit-input'>
            <button class='class-comment-update-button'>更新</button>
        </div>
    `
    return c
}

var insertcommentEdit = function(self){
    var commentedittemplate = commenteditTempalte(self)
    var commentcell = self.closest('.class-comment-cell')
    commentcell.insertAdjacentHTML('beforeEnd', commentedittemplate)
}

var bindEventCommentEdit = function(){
    var weiboList = e('#id-weibo-list')
    weiboList.addEventListener('click', function(event){
        var self = event.target
        if (self.classList.contains('class-comment-edit')){
            insertcommentEdit(self)
        }
    })
}

2.更新评论

更新评论的时候，传递的数据包括评论id和更新的内容；

var apicommentUpdate = function(form, callback){
    path = '/api/weibo/comment/update'
    ajax('POST', path, form, callback)
}

var bindEventCommentUpdate = function(){
    var weiboList = e('#id-weibo-list')
    weiboList.addEventListener('click', function(event){
        var self = event.target
        if (self.classList.contains('class-comment-update-button')){
            var classcommentupdateform = self.closest('.class-comment-update-form')
            var commentinput = classcommentupdateform.querySelector('.class-comment-edit-input')
            var content = commentinput.value
            var id = self.dataset.id
            form = {
                content: content,
                id: id,
            }
            apicommentUpdate(form, function(r){
                var comment = JSON.parse(r)
                // 直接找到祖父元素
                var classcommentcell = self.closest('.class-comment-cell')
                var content = classcommentcell.querySelector('.class-comment-content')
                content.innerText = comment.content
                self.parentElement.remove()
            })
        }
    })
}