我如何简化我的Javascript代码;显示/隐藏在DIV上”;作用

How can I simplify my code for my Javascript "show/hide on DIV" function?

本文关键字：隐藏 DIV 作用 显示 何简化 我的 Javascript 代码      更新时间：2023-09-26

我已经阅读了整个W3schools Javascript教程（基础和高级）3遍以上。我已经读了无数次HTML/CSS教程。我也在这个网站上读了一些关于sho/hide功能的帖子。我尝试过使用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转换时，这两个按钮被移动，并变成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" ;
  }
}

目前，我在CLOSE/SHOW按钮的onclick属性中有Javascript，它将按钮与showerHider函数联系起来。我想简化这些属性，并将Javascript放入外部showerHider Javascript文件中。此外，我不确定是让Javascript处理转换还是使用CSS。我发现Javascript在为所有主要浏览器声明转换时都很棘手，我更喜欢让CSS来做。

这是一个简化版本：

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，您可以在此处阅读更多信息

然而，正如Jeff Powers所建议的那样，强烈考虑拥有两个类，然后只使用JavaScript在它们之间切换。

将所有CSS移动到一个CSS文件中，并将其嵌套在一个show nav类下，只需在父元素上切换即可。

此外，onclick属性用于在单击时运行javascript函数。您应该从用于链接到其他页面的href属性中删除javascript。

   <a id="btntxt" href="#" onclick="hiderShower(document.getElementById('wrappernav'));">HIDE NAVIGATION</a>

我知道您不想使用jQuery，但这有助于分离关注点。一般来说，您不希望在html中调用javascript。您可以将其与javascript文件中的事件侦听器绑定。

这里有一个链接到另一个问题，它显示了如果您决定使用普通javascript和jQuery，如何切换类。

这个jQuery可以在普通JS中完成吗？

相关文章：