用JS隐藏文字

Question

我在另一个线程中问过这个问题并得到了一些有用的建议。我重新 post 是因为我没有对另一个 post.

有任何吸引力

我有一小行 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应该在点击☰打开时隐藏"Open":

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 没有定义，所以我已经定义了它。我已经修复了两者，但无法隐藏 "Open" 文本。我认为问题在于我如何对元素进行分组或如何分配我的 ID？任何建议将不胜感激。

Answer 1

我稍微简化了你的问题。您正在将字符代码与字符代码的字符串表示形式进行比较。您可以使用 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: 如果您使用的是回调函数，则无需为其命名。

Answer 2

老实说，我认为您最好的方法是根据 attribute/class 而不是文本重写文本内容。看看这个例子：

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

const menuBtn = document.getElementById('open');

menuBtn.addEventListener('click', ev => {
  if (menuBtn.getAttribute('data-opened') === 'false') {
    menuBtn.innerHTML = '&#9776;'
    menuBtn.setAttribute('data-opened', 'true')
  } else {
    menuBtn.innerHTML = '&#9776; Open'
    menuBtn.setAttribute('data-opened', 'false')
  }
})

示例：https://codepen.io/lessadiogo/pen/BayELYQ

干杯，

用JS隐藏文字

Hiding text with JS

html

javascript

show-hide