一个关于js的绑定事件小案例,有些逻辑不是很懂,求解!!!

图片是一盏灯,点击一下灯开了,再点击一下灯灭了,就是灯亮和灯灭可以来回切换,下面这个是正确的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img id="light" src="image/off.jpg">

    <script>
        //获取图片对象
        var light =document.getElementById("light");
        //代表灯是灭的
        var flag = false; 
        //绑定单击事件
         light.onclick = function(){
             if(flag){
                 light.src = "image/off.jpg";
                 flag = false;
             }else{
                 light.src = "image/on.jpg";
                 flag = true;
             }
         }
    </script>
</body>
</html>

但是如果我将绑定单击事件中的代码更换为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img id="light" src="image/off.jpg">

    <script>
        //获取图片对象
        var light =document.getElementById("light");
        //代表灯是灭的
        var flag = false; 
        //绑定单击事件
        light.onclick = function(){
            if(flag == false){
                light.src = "image/on.jpg";
                flag = true;
            }else{
                light.src = "image/off.jpg";
                flag = false;
            }
        }
    </script>
</body>
</html>

图片就不能来回切换了,主要是看不懂if语句的逻辑,为什么正确的代码中flag在里面不用写判断语句,而是直接写了个“flag”就可以了

查看全部
weixin_43415461
CherryOto
2020/05/28 14:22
  • css
  • java
  • html5
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

3个回复