2020/08/03工作笔记之点击事件中得函数其实也会在相同得情况下触发得，因为已经点击了。这个js代码需要注意

我在做项目中遇到了一个上传两个身份证头像得问题，当我点击得时候居然发现上一个点击事件中得函数触发了。后来才注意到由于我之前点击了得，所以第一个点击事件之后得函数如果在下一个点击事件中存在得话，这样就冲突了，所以我们需要清楚点击事件即可，我写的代码如下：以及为了防止自己忘记得笔记：
注意一下点击事件，当下一个点击事件中如果包含了上一个点击中相同的事件，那么上一个事件还是会出发的，因为上一个点击事件已经点击过了，后来的函数还是会触发，比如包含了一个第二个点击事件中相同的事件，其实本质还是因为函数的逻辑。
工作代码：

$(function() {
    $('.picFrist').click(function() {
        $('.big_box').toggle();
    });
    $('.picLast').click(function() {
        $('.big_box').toggle();
    });
    $('.del').click(function() {
        $('.big_box').toggle();
    })

    // 点击上传身份证图片1区域
    $('.up_top').click(function() {
            console.log(789);
            // 隐藏十字样式
            $('.top_id_pic_one, .top_id_pic_two').toggle();
            console.log(456);
            // 点击之后弹窗出来
            $('.big_box').toggle();
            // 然后是上传到top的操作
            // 点击从相册选取后再由js实现自动点击input
            // 点击down之后还是会触发这个 然后把这个取消掉
            $('.choose_toggleBox').click(function() {
                // 取消
                $('.choose_toggleBox').off('click')
                    // 自动触发事件
                $('#choose_file').trigger("click");
            })

            // 点击拍照后再由js实现自动点击input
            $('.choose_pic').click(function() {
                // 取消
                // 
                $('.choose_pic').off('click')
                    // 自动触发事件
                $('#choose_file_capture').trigger("click");
            })

            // 调取后台上传头像接口
            // 利用ajax包调取修改登录密码接口数据
            // 从相册选取图片自动触发事件
                 $('#choose_file').change(function()  {            
                    let  file  =  $("#choose_file")[0].files[0];    //选择的图片文件
                    console.log($("#choose_file")[0]);            
                    let  formDatas  =  new  FormData();            
                    formDatas.append('file',  file);
                    console.log(file)
                    $.ajax({
                        url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
                        type: 'post',
                        processData: false,
                        contentType: false, //"multipart/form-data"
                        data: formDatas,
                        dataType: "json",
                        success: function(data, id) {
                            console.log(data, id)
                            Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
                                console.log(data.url)
                                console.log(res)
                                    // 图片位置： http://mobile.btcnews.online/public/uploads/20200721/777d33db5f0732abc4527ceb74dd0434.jpg
                                    // 将头像的img的src改为这个地址即可
                                let img_url = data.url;
                                // 修改uptop的背景样式即可 给个图片背景
                                // $('.pic img').attr('src', `http://mobile.btcnews.online/public${img_url}`)
                                $('.up_top').css('background', `url(http://mobile.btcnews.online/public${img_url})`)
                            })
                        }
                    })
                })
                // 从拍照选取图片自动触发事件
                     $('#choose_file_capture').change(function()  {            
                    let  file  =  $("#choose_file_capture")[0].files[0];    //选择的图片文件
                    console.log($("#choose_file_capture")[0]);            
                    let  formDatas  =  new  FormData();            
                    formDatas.append('file',  file);
                    console.log(file)
                    $.ajax({
                        url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
                        type: 'post',
                        processData: false,
                        contentType: false, //"multipart/form-data"
                        data: formDatas,
                        dataType: "json",
                        success: function(data, id) {
                            console.log(data, id)
                            Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
                                console.log(data.url)
                                console.log(res)
                                    // 图片位置： http://mobile.btcnews.online/public/uploads/20200721/777d33db5f0732abc4527ceb74dd0434.jpg
                                    // 将头像的img的src改为这个地址即可
                                let img_url = data.url;
                                // 修改uptop的背景样式即可 给个图片背景
                                $('.up_top').css('background', `url(http://mobile.btcnews.online/public${img_url})`)

                            })
                        }
                    })


                            
                })
        })
        // 点击上传身份证图片2区域
    $('.up_down').click(function() {
            // 隐藏十字样式
            $('.down_id_pic_one, .down_id_pic_two').toggle();
            // 点击之后弹窗出来
            $('.big_box').toggle();
            // 然后是上传到top的操作
            // 点击从相册选取后再由js实现自动点击input
            $('.choose_toggleBox').click(function() {
                    // 取消
                    $('.choose_toggleBox').off('click')
                        // 自动触发事件
                    $('#choose_file_2').trigger("click");
                })
                // 点击拍照后再由js实现自动点击input
            $('.choose_pic').click(function() {
                // 取消
                $('.choose_pic').off('click')
                    // 自动触发事件
                $('#choose_file_capture_2').trigger("click");
            })

            // 调取后台上传头像接口
            // 利用ajax包调取修改登录密码接口数据
            // 从相册选取图片自动触发事件
                 $('#choose_file_2').change(function()  {            
                    let  file  =  $("#choose_file_2")[0].files[0];    //选择的图片文件
                    console.log($("#choose_file_2")[0]);            
                    let  formDatas  =  new  FormData();            
                    formDatas.append('file',  file);
                    console.log(file)
                    $.ajax({
                        url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
                        type: 'post',
                        processData: false,
                        contentType: false, //"multipart/form-data"
                        data: formDatas,
                        dataType: "json",
                        success: function(data, id) {
                            console.log(data, id)
                            Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
                                console.log(data.url)
                                console.log(res)
                                    // 图片位置： http://mobile.btcnews.online/public/uploads/20200721/777d33db5f0732abc4527ceb74dd0434.jpg
                                    // 将头像的img的src改为这个地址即可
                                let img_url = data.url;
                                // 修改uptop的背景样式即可 给个图片背景
                                // $('.pic img').attr('src', `http://mobile.btcnews.online/public${img_url}`)
                                $('.up_down').css('background', `url(http://mobile.btcnews.online/public${img_url})`)
                            })
                        }
                    })
                })
                // 从拍照选取图片自动触发事件
                     $('#choose_file_capture_2').change(function()  {            
                    let  file  =  $("#choose_file_capture_2")[0].files[0];    //选择的图片文件
                    console.log($("#choose_file_capture_2")[0]);            
                    let  formDatas  =  new  FormData();            
                    formDatas.append('file',  file);
                    console.log(file)
                    $.ajax({
                        url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
                        type: 'post',
                        processData: false,
                        contentType: false, //"multipart/form-data"
                        data: formDatas,
                        dataType: "json",
                        success: function(data, id) {
                            console.log(data, id)
                            Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
                                console.log(data.url)
                                console.log(res)
                                    // 图片位置： http://mobile.btcnews.online/public/uploads/20200721/777d33db5f0732abc4527ceb74dd0434.jpg
                                    // 将头像的img的src改为这个地址即可
                                let img_url = data.url;
                                // 修改uptop的背景样式即可 给个图片背景
                                $('.up_down').css('background', `url(http://mobile.btcnews.online/public${img_url})`)

                            })
                        }
                    })


                            
                })
        })
        // 将上传路径转换为本地路径start
    function getUrl(input_file) {
        var src;
        var oFReader = new FileReader();
        var file = input_file;
        oFReader.readAsDataURL(file);
        oFReader.onloadend = function(oFRevent) {
            src = oFRevent.target.result;
            return src;

        }
    }
    $('.exit').on('click', function() {
        history.back(-1);
    })
})