老师为什么show设置了状态hide没设置状态就不能在隐藏时候点击显示而有反应呢
来源：2-3 静静的显示和隐藏（2）
母鸡阿
2021-01-19 12:15:13
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单组件化-显示与隐藏2</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
body{width: 400px;margin: 50px auto;background-color: yellow;}
.btn{width: 50%;height: 50px;float: left;}
.box{width: 100%;height: 200px;background-color: red;}
</style>
</head>
<body>
<button id="show" class="btn">显示</button>
<button id="hide" class="btn">隐藏</button>
<div class="box"></div>
<script>
var silent = {
init:function($elem){
if($elem.is(':hidden')){//判断$elem元素是否处在隐藏状态
$elem.data('status','hiddenn');
}else{
$elem.data('status','shown');
}
},
show:function($elem){
if($elem.data('status') === 'show')return;
if($elem.data('status') === 'shown')return;
$elem.data('status','show').trigger('show');
$elem.show();
$elem.data('status','shown').trigger('shown');
},
hide:function($elem){
if($elem.data('status') === 'hide')return;
if($elem.data('status') === 'hiddenn')return;
$elem.data('status','hide').trigger('hide');注释这一行
$elem.hide();
$elem.data('status','hiddenn').trigger('hiddenn');也注释这一行
}
}
var $box = $('.box');
silent.init($box);
$('#show').on('click',function(){
silent.show($box);
})
$('#hide').on('click',function(){
silent.hide($box);
})
$box.on('show shown',function(e){
if(e.type === 'show'){
$box.css('background-color','blue');
}else if(e.type === 'shown'){
setTimeout(function(){
$box.css('background-color','');
},1000)
}
})
</script>
</body>
</html>
1回答
-
好帮手慕久久
2021-01-19
同学你好，解答如下：
点击show按钮时，会执行show方法。在show方法中，会先判断“.box”的状态，如果“.box”是show、shown状态，则会执行“return”语句。而“return”会终止show方法，即代码不会往下执行了，因此“.box”就无法显示了：
假设“.box“初始时是显示的，则会被添加自定义属性“status”，值为shown：
此时点击隐藏按钮，会把“.box“隐藏。如果在hide方法中，不更改“.box“的自定义属性“status”的值，那么再次点击显示按钮时，由于“status”是shown，所以会执行return，则“ $elem.show()”这句代码就不会执行了，从而元素不会显示。
祝学习愉快！
0
相似问题