项目问题总结

投票系统（vote）

事件委托

代码框架如下：

`<ul>
        <li><i class="icon" style="background:url(${data.icon});background-size:cover;background-repeat:no-repeat"></i></li>
        <li class="name">${data.username}</li>
        <li class="num">${data.num}</li>
        <li><i class="good"  id=${data.userid}></i></li>
    </ul>`

图片如下：

当要想绑定li下i元素，但其父级li和爷爷级ul都是动态添加的元素。所以只能绑到静态的元素.content（太爷爷），这样才有效果。而且绑定后，.container其内部的所有子元素都会被绑定上click事件，这样不是最终效果，最终效果是要给i元素绑定点击效果。所以要进行判断（"className==good"） 这个good是当前的i元素中的class名。



$('.content').delegate($(".good"),'click',(event)=>{
        let this_btn = event.target
        console.log(event)
        if(this_btn.className==="good"){
            //获取当前被点赞的用户id
            let $id=this_btn.id
            console.log($id)
            axios.get(`http://127.0.0.1:8888/good?loginUser=jine&userid=${$id}`).then((res)=>{
                if(res.data.code==200){
                    // console.log(this_btn)
                    //思路：通过当前的点赞按钮来操作对应的显示票数文本节点
                    //技术：Jquery实现
                    $(this_btn).parent().prev().text(res.data.num)
                    /*注意：这里不能使用this，因为this指针指向的是Window，虽然被函数包裹着，但这个函数还是属于全局，所以this是在哪调用就指向谁*/
            
                    
                }else{
                    alert(res.data.msg)
                }
            })
        }
    })