Сокрытие текста с JS - PullRequest
Новая
       139

Сокрытие текста с JS

0 голосов
/ 27 января 2020

Я спросил это в другой ветке и получил несколько полезных советов. Я пересылаю это, потому что я не получаю никакой тяги к другому сообщению.

У меня есть небольшая строка 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>

Соответствующее js для этого html, которое должно отображать скрытие «Открыть» при нажатии ☰ «Открыть»: 

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, потому что это в безопасности, а также мой var x не был определен, поэтому я определил его. Я исправил оба, но я не могу скрыть текст «Открыть». Я считаю, что проблема заключается в том, как я сгруппировал свои элементы или как я назначаю свои идентификаторы? Любые предложения будут с благодарностью.

Ответы [ 2 ]

0 голосов
/ 27 января 2020

Честно говоря, я полагаю, что вашим лучшим подходом было бы переписать текстовую базу данных на основе атрибута / класса, а не текста. Взгляните на пример: 

<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

Приветствия,

0 голосов
/ 27 января 2020

Я немного упростил ваш вопрос. Вы сравниваете 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: если вы используете функцию обратного вызова, нет необходимости называть ее.

...