Javascript 如何使用全局变量使用IF-ELSE语句反转JS操作的效果？_Javascript_Html_Css_If Statement

Javascript 如何使用全局变量使用IF-ELSE语句反转JS操作的效果？

javascript html css if-statement

Javascript 如何使用全局变量使用IF-ELSE语句反转JS操作的效果？,javascript,html,css,if-statement,Javascript,Html,Css,If Statement,在JavaScript中创建一个非常基本的IF-ELSE语句，在DIV上创建一个可单击的覆盖。无论关闭与否，打开操作都有效使用onClick函数选择div，var将告诉它是否运行该函数 <div onclick="myFunction()" class="outer"> <div class="inner" id="overlay"> <h1>Title</h1>

在JavaScript中创建一个非常基本的IF-ELSE语句，在DIV上创建一个可单击的覆盖。无论关闭与否，打开操作都有效

使用onClick函数选择div，var将告诉它是否运行该函数

<div onclick="myFunction()" class="outer">

<div class="inner" id="overlay">
  <h1>Title</h1>
  <p>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry'sstrong text standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?</p>
</div>

运行

myFunction

时，始终将局部变量overlay设置为false。这意味着，当您检查overlay的值时，它始终为false

您需要将变量移动到更高的范围，以便在对

myFunction

的不同调用之间保持其值

试着在

myFunction

之外创建变量，就像这样

var覆盖=false；
函数myFunction（）{
如果（覆盖==false）{
document.getElementById（“覆盖”）.style.height=“100%”；
叠加=真；
}否则{
document.getElementById（“覆盖”）.style.height=“20%”；
叠加=假；
}
}

您的覆盖变量将始终为false。将覆盖层移出功能

  var overlay = false;  
  function myFunction() {
     if(overlay == false) { 
      document.getElementById("overlay").style.height = "100%";
      overlay = true;
     } else {
      document.getElementById("overlay").style.height = "20%";
      overlay = false;
     }
   }

每次运行myFunction（）时，overlay变量都设置为false。这使得高度始终设置为100%

将overlay变量放在myFunction（）之外修复了这个问题！现在，由于overlay变量是全局变量，因此当单击[hidded Showed]时，它会切换状态

let overlay=false；
函数myFunction（）{
如果（覆盖==false）{
document.getElementById（“覆盖”）.style.height=“100%”；
叠加=真；
}否则{
document.getElementById（“覆盖”）.style.height=“20%”；
叠加=假；
}
}

以下是3个版本的解决方案

使用全局变量跟踪覆盖状态

使用元素数据属性参数而不是全局变量

使用不带全局变量的“id”和“data”属性


图像覆盖页
.外部{
位置：相对位置；
宽度：25雷姆；
高度：15雷姆；
边界半径：1米；
背景图像：url（“https://user-images.githubusercontent.com/16360374/37567282-e1932872-2a81-11e8-807b-efc5a997f2f1.jpg");
背景位置：中心；
背景尺寸：封面；
盒影：0px 0px 10px#8888888；
溢出：隐藏；
}
.内部{
位置：绝对位置；
底部：0；
宽度：100%；
身高：20%；
背景色：rgba（0,0,0,0.7）；
边框左下半径：1米；
边框右下半径：1米；
过渡：0.5s；
}
.内部>*{
颜色：白色；
填充：1rem；
}
h1{边距：0；填充：0；}
div{display:inline block；}/*可选设置*/
标题
什么是Lorem Ipsum Lorem Ipsum只是印刷和排版行业的虚拟文本
自16世纪以来，Lorem Ipsum一直是业界强大的文本标准虚拟文本
当一个不知名的印刷商拿着一个铅字厨房，抢着做一本它有的铅字样本书时
标题2
什么是Lorem Ipsum Lorem Ipsum只是印刷和排版行业的虚拟文本
此版本使用内部状态数据属性
标题3

此版本使用元素“ID”和数据属性
console.clear（）；
/*版本#1-使用全局变量*/
var叠加=假；
函数myFunction（）{
覆盖层=！覆盖层；
设ht=（叠加）‘100%’：‘20%’；
document.getElementById（“覆盖”）.style.height=ht；
}
/* */
/*版本2-使用元素属性*/
函数myFunction2（）{
let overlay=document.getElementById（'overlay2'）；
让status=overlay.getAttribute（'data-overlay'）；
如果（状态=='false'）{
overlay.style.height='20%'；overlay.setAttribute（'data-overlay'，'true'）；
}否则{
overlay.style.height='100%'；overlay.setAttribute（'data-overlay'，'false'）；
}
}
/* */
/*版本#3-使用ID和元素属性*/
功能myFunction3（IDS）{
let overlay=document.getElementById（ID）；
让status=overlay.getAttribute（'data-overlay'）；
如果（状态=='false'）{
overlay.style.height='20%'；overlay.setAttribute（'data-overlay'，'true'）；
}否则{
overlay.style.height='100%'；overlay.setAttribute（'data-overlay'，'false'）；
}
}
/* */

function myFunction() {

  var overlay = false;
  
 if(overlay == false) { document.getElementById("overlay").style.height = "100%";
overlay = true;
}
else
{document.getElementById("overlay").style.height = "20%";
overlay = false;}
}

  var overlay = false;  
  function myFunction() {
     if(overlay == false) { 
      document.getElementById("overlay").style.height = "100%";
      overlay = true;
     } else {
      document.getElementById("overlay").style.height = "20%";
      overlay = false;
     }
   }

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title> Image Overlays Page </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
    
    <!-- From: https://stackoverflow.com/questions/62538838/how-to-reverse-effect-of-a-js-action-using-an-if-else-statement-using-global-var -->
    <style>
     .outer {
       position: relative;
       width: 25rem; 
       height: 15rem;
       border-radius: 1em;
       background-image: url("https://user-images.githubusercontent.com/16360374/37567282-e1932872-2a81-11e8-807b-efc5a997f2f1.jpg");
       background-position: center;
       background-size: cover;
       box-shadow: 0px 0px 10px #888888;
       overflow: hidden;
     }
     .inner {
       position: absolute; 
       bottom: 0; 
       width: 100%;
       height: 20%; 
       background-color: rgba(0,0,0,0.7);
       border-bottom-left-radius: 1em;
       border-bottom-right-radius: 1em;
       transition: 0.5s;
     }
     .inner > * {
       color: white;
       padding: 1rem;
     }
     h1 { margin: 0; padding: 0; }
     div { display: inline-block; } /* optional setting */
    </style>
    </head><body>
    
    <div onclick="myFunction()" class="outer">
     <div class="inner" id="overlay">
      <h1>Title</h1>
      <p>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry 
    Lorem Ipsum has been the industry's strong text standard dummy text ever since the 1500s 
    when an unknown printer took a galley of type and scrambled it to make a type specimen book it has?</p>
     </div>
    </div>
    
    <div onclick="myFunction2()" class="outer" data-overlay='false'>
     <div class="inner" id="overlay2">
      <h1>Title 2</h1>
      <p>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
      <p>This version uses an internal status data-attribute.</p>
     </div>
    </div>
    
    <div onclick="myFunction3('overlay3')" class="outer" data-overlay='false'>
     <div class="inner" id="overlay3">
      <h1>Title 3</h1>
      <p><br />This version uses element 'ID' and data-attribute.</p>
     </div>
    </div>
    
    <script>
      console.clear();
    
    /* Version #1 - uses global variable */
      var overlay = false;  
      function myFunction() {
        overlay = !overlay;
        let ht = (overlay) ? '100%' : '20%'; 
        document.getElementById("overlay").style.height = ht;
      }
    /* */
    
    /* Version #2 - uses element attribute */
      function myFunction2() {
                let overlay = document.getElementById('overlay2');
        let status = overlay.getAttribute('data-overlay');
        if (status === 'false') { 
          overlay.style.height = '20%';  overlay.setAttribute('data-overlay','true');
        } else {
          overlay.style.height = '100%';   overlay.setAttribute('data-overlay','false');
        }
      }
    /* */
    
    /* Version #3 - uses ID and element attribute */
      function myFunction3(IDS) {
        let overlay = document.getElementById(IDS);
        let status = overlay.getAttribute('data-overlay');
        if (status === 'false') { 
          overlay.style.height = '20%';  overlay.setAttribute('data-overlay','true');
        } else {
          overlay.style.height = '100%';   overlay.setAttribute('data-overlay','false');
        }
      }
    /* */
    </script>
    
    </body>
</html>