记录前端开发时遇到的各种坑

 1. 绑定点击事件

 //第一种直接绑定点击事件
$(".warning_flag").click(function (){
         alert('你好');
     });

 //第二种用on绑定的点击事件
    $(function() {
        $(document).on("click",".warning_flag",function(){
            alert('你好');
        });
    });

2.如下：外部拿点击事件中的值（直接输出会报错，因为x是局部变量）

第一步：先使用window.x = x把x提升到全局变量；(但直接输出还是报错，因为这是个点击事件，他会先执行外面的console.log（x）不点击就执行，x还没赋予值)

第二步：需要把console.log放在函数中，点击时调用该函数。

这么写只是举个简单的例子，实际上有很多用途，比如点击按钮读取输入框的value值，然后输出进行一系列的操作等

<script type="text/javascript">
    
    $('#dd').on('click',function(){
        x = 10
        window.x = x
        demo();
    })
    //console.log(x)  报错
    function demo(){
        console.log(x)
    }

</script>

3.根据日期查找表格某一天的数据

表格用的GridManager插件，日历是网上随便找的插件。要实现的功能就是用户选择日期后，显示那天的数据。

解决思路就是：1.在后台数据中添加一个日期，用于判断该数据是哪天的；2.前端获取输入框中的value值和数据中的日期，进行循环判断；3. 对符合条件的显示，不符合的隐藏。

实现时遇到的问题：

表格中的tr没有名字，增加循环判断的话只有最后一个循环才生效，之前的会被覆盖

如下图，给find增加点击事件，获取value值，增加for循环，当value不等于数据中的日期时就隐藏并打印一个错误，等于时就显示并打印一个正确。

(function(){
$('#find').click(function(){
    for(i=0;i<responseData.data.length;i++){;
        var sstxt=$('#tye').val();
        if (sstxt == responseData.data[i].calendar) {
            $("table tbody tr").show();
            console.log('正确');
        }else{
            $("table tbody tr").hide();
            console.log('错误');
        }
    }
       
  
 })
})();

然后就是下面这种问题。看控制台，确实执行了四次，但全被最后一次覆盖了。因为选择的是所有tr

最后的解决办法就是遍历所有的tr给一个id，并加上for循环的 i 防止id重复。然后再进行判断，对于满足条件的 id 显示，不满足的隐藏。至此就一切正常了。

(使用GridManager时发现一个问题，无法直接选择table里面的tbody和tr td，只能选择thead。通过下面的方法才可以选择table tbody tr  。目前还不知道什么原因)

(function(){
    $('#find').click(function(){
        for(i=0;i<responseData.data.length;i++){
            $.each($("table tbody tr"),function(i){
                $(this).attr({"id":"list_use"+i});
            });
            var sstxt=$('#tye').val();
            if (sstxt == responseData.data[i].calendar) {
                $('#list_use'+ i).show();
            }else{
                $('#list_use'+ i).hide();
            }
            if(sstxt == ''){
                $('#list_use'+ i).show()
            }
        }
     })
    })();