简单事件：实现图片显示隐藏

作者: 广陵周惊蛰 | 来源:发表于2019-10-25 09:08 被阅读0次

简单事件：实现图片显示隐藏
js -- 常见事件和操作
04-JQuery动画
MaterialDesign_fab的滑动显示和隐藏交互动画
jquery案例实现广告的自动显示与隐藏
8.动作---元件
常用指令
CoordinatorLayout、FloatingAction
JavaScript3.0
day7_JavaScript(2)

功能描述：添加事件与判断，实现图片显示隐藏

2-1.png

2-2.png

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box {
            background: red;
            width: 200px;
            height: 200px;
        }
        .show{
            display: block;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>

    <input type="button" id="btu" value="隐藏">
    <br>
    <div id="box" class="show">

    </div>

    <script>
        var btu = document.getElementById('btu');

        var isShow = true;
        btu.onclick = function (){
        var box = document.getElementById('box');
        if (isShow) {
            isShow = false;
            box.className = 'hidden';
            this.value = '显示';
        } else {
            isShow = true;
            box.className = 'show';
            this.value = '隐藏';          
            }
    }
        
        
    </script>

</body>
</html>

过程中报错：

Uncaught SyntaxError: Invalid or unexpected token

报错原因：在<script>中少了一个"}"

补充知识点：this的几种情况：

1.普通函数中 -> window
2.构造函数中 -> 当前构造函数创建的对象
3.方法中的 -> 方法所属对象
4.事件所属函数 ->事件源，谁调用的该事件，this就指向谁