javascript - 如何简化 Javascript "show/hide on DIV"函数的代码？

Question

我已经阅读了整个 W3schools Javascript 教程(基础和高级)超过 3 遍。我已经无数次阅读 HTML/CSS 教程。我还阅读了该站点上有关显示/隐藏功能的几篇文章。我曾尝试使用 Javascript 变量，但我遇到了错误。

绝对不要 Jquery，请只使用 Javascript。

我的标记:

<script type="text/javascript" src="/showerHider.js"></script>

<div id="wrappernav"> </div>

<div class="container">
   <a id="btntxt" href="javascript:showerHider(document.getElementById('wrappernav'))">HIDE NAVIGATION</a>
   <a id="btn" href="javascript:showerHider(document.getElementById('wrappernav'))"></a>
</div>

我是一个极简主义的程序员，想简化我的 showerHider Javascript 函数和我的标记的属性。我有一个 <div id="wrappernav">当用户单击嵌套在另一个 <div class="container"> 中的两个 CLOSE 按钮之一时，导航垂直过渡到屏幕外.当 wrappernav transitions 这两个按钮被移动并变成 SHOW 按钮，让用户可以选择...好吧你可以看到这是怎么回事...

我的外部 Javascript:

function showeHider(floater)
{
floater.style.webkitTransition = "margin-top .25s ease-in-out 0s" ;

if (floater.style.marginTop == "-345px" )
  {
  floater.style.marginTop = "25px" ;
  document.getElementById("btntxt") .innerHTML = "HIDE NAVIGATION" ;
  document.getElementById("btntxt") .style.top = "-370px" ;
  document.getElementById("btntxt") .style.left = "162px" ;
  document.getElementById("btn") .style.top = "-300px" ;
  document.getElementById("btn") .style.left = "135px" ;
  }

else
  {
  floater.style.marginTop = "-345px" ;
  document.getElementById("btntxt") .innerHTML = "SHOW NAVIGATION" ;
  document.getElementById("btntxt") .style.top = "20px" ;
  document.getElementById("btntxt") .style.left = "490px" ;
  document.getElementById("btn") .style.top = "17px" ;
  document.getElementById("btn") .style.left = "450px" ;
  }
}

目前我在 onclick 中有 Javascript CLOSE/SHOW 按钮的属性，将按钮绑定(bind)到 showerHider功能。我想简化这些属性并将 Javascript 放在外部 showerHider 中Javascript 文件。此外，我不确定是否应该让 Javascript 处理转换或使用 CSS。我发现在为所有主要浏览器声明转换时 Javascript 很棘手，我更愿意让 CSS 来做。

Answer 1

这是一个简化版本:

function showeHider(floater) {
  var btn, btntxt, arrValues, strPx;

  floater.style.webkitTransition = "margin-top .25s ease-in-out 0s";

  btn = document.getElementById("btn");
  btntxt = document.getElementById("btntxt");

  arrValues = (floater.style.marginTop == "-345px") ? ["25", "HIDE", "-370", "162", "-300", "135"] : ["-345", "SHOW", "20", "490", "17", "450"];
  strPx = "px";

  floater.style.marginTop = arrValues[0] + strPx;
  btntxt.innerHTML = arrValues[1] + " NAVIGATION";
  btntxt.style.top = arrValues[2] + strPx;
  btntxt.style.left = arrValues[3] + strPx;
  btn.style.top = arrValues[4] + strPx;
  btn.style.left = arrValues[5] + strPx;
}

也许 strPx 有点矫枉过正，但如果您打算最小化代码，那么 var 的长度将只有 1 个字符，应该会有一些好处。

我所做的是:

• 缓存元素btn和btntxt
• 将值放在数组中
• 使用三元运算符 a ? b : c，意味着如果 a 中的内容为真，它将选择 b 否则选择 c，您可以 read more about it here .

但是，请认真考虑拥有两个类，然后仅使用 JavaScript 在它们之间切换，如 Jeff Powers suggested .