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,然后判断一下行了。以后我们会遇到很多的东西,可能会遇到不同的问题,要不断解决问题,才能提高自己的经验水平,而且助于解决的能力。