时间戳

首页 > 解决方案 > 用JS隐藏文本

javascript - 用JS隐藏文本

问题描述

我在另一个线程中问过这个问题并得到了一些有用的建议。我重新发布这个是因为我没有在其他帖子上获得任何牵引力。

我有一小行 html 可以打开一个侧导航栏：

<div id="main">
        <span id="open" style="font-size:30px;cursor:pointer">&#9776; Open</span>
        <img class="imgcenter" src="/images/eggs.jpg">
        <p>Where </p>
        <img class="imgcenter" src="/images/eggs.jpg">

      </div>

当点击 ☰ 打开时，应该显示隐藏“打开”的这个 html 的相应 js：

document.getElementById("open").addEventListener("click", function openMainNav() {
document.getElementById("myMainNav").classList.add('sideNavOpen');
document.getElementById("main").classList.add('lmarg250');
var x = document.getElementById("open");
if (x.innerHTML === "&#9776; Open") {
  x.innerHTML = "&#9776;";
} else {
  x.innerHTML = "&#9776; Open";
}

});

我被指示删除 hmtl 中的“onclick”，因为它是不安全的，而且我的 var x 没有定义，所以我已经定义了它。我已经修复了这两个问题，但我无法隐藏“打开”文本。我相信问题在于我如何对元素进行分组或如何分配我的 ID？任何建议将不胜感激。

标签： javascripthtmlshow-hide

解决方案

我稍微简化了你的问题。您正在将 charcode 与 charcode 的字符串表示形式进行比较。您可以使用String.fromCharCode()来获取字符并匹配它。

document.getElementById("open").addEventListener("click", function() {
  let span = document.getElementById("open");
  if (span.innerHTML === String.fromCharCode(9776).concat(" Open") )
    span.innerText = String.fromCharCode(9776);
  else
    span.innerText = String.fromCharCode(9776).concat(" Open");

});
<span id="open" style="font-size:30px;cursor:pointer">&#9776; Open</span>

PS：如果您使用的是回调函数，则无需命名。

推荐阅读