用JS隐藏文字

2024-05-17 • 问答

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

我有一小段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时应该显示隐藏“ 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，因此我已经定义了它。我已经修复了这两个问题，但是无法隐藏“打开”文本。我认为问题出在我如何将元素分组或如何分配ID？任何建议将不胜感激。

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

老实说，我相信您最好的方法是基于属性/类而不是文本来重写文本内容。看一下示例：

<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隐藏文字

youchaozan 回答：用JS隐藏文字

大家都在问