jquery按钮隐藏的闪烁问题

  |   jquery 前端

当数量等于0时，按钮本来是隐藏的。浏览器F5刷新之后，结算按钮突然显示，再判断之后就开始隐藏，这就是存在Bug问题。
我们首先解决这个问题是写在html样式display:none，然后判断方法可以不让闪烁的问题。

写个案例：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="gouw">
//按钮
<button type="button" class="mui-btn" style="display:none;">结算</button>
</div>
<script>
  $(document).ready(function() {
    $("#bottomCartNum").bind('DOMNodeInserted',
    function() {
        if ($(this).html() != 0) {
            $(".gouw").find(".mui-btn").css('display', 'block'); //显示
        } else {
            $(".gouw").find(".mui-btn").css('display', 'none'); //隐藏
        }
    })
})
</script> 
</body>
</html>

小结：
浏览器刷新F5时，当数量是0，按钮自动隐藏，如果有闪烁的时候要解决这个方法：加个display:none，然后判断一下行了。以后我们会遇到很多的东西，可能会遇到不同的问题，要不断解决问题，才能提高自己的经验水平，而且助于解决的能力。