我正在尝试编写一个函数隐藏一个元素，显示另一个

Question

我正在尝试编写一个函数来重现隐藏一个元素并显示另一个元素的动作。我知道 JQuery 中有一些东西可以解决这个问题，但我还没有，所以想用简单的 js 解决它。const changeDisplay = (elm1, elm2) => {     let E1 = document.getElementById('elm1').style.display = 'none'     let E2 = document.getElementById('elm2').style.display = 'block'     return elm1.addEventListener('click', E1) &&     elm1.addEventListener('click', E2)   }   changeDisplay('not', 'ok')TypeError: document.getElementById(...) is null script.js:6:21

Answer 1

尝试使用如下示例的代码添加或删除 CSS 类，这些类将根据需要隐藏或显示您的元素。

window.onload = function() {

 var items = document.querySelectorAll('.item');

 for (var i=0; i < items.length; i++ ){

  items[i].addEventListener('click', function(event) {

    for (var i=0; i < items.length; i++ ){

      items[i].classList.remove("hidden");

    }

    event.target.classList.add("hidden");

   });

 }

}

.hidden { display: none; }

.item { cursor: pointer; }

<ul>

  <li class="item">Item 1</li>

  <li class="item hidden" >Item 2</li>

</ul>

Answer 2

在您的代码段中，您尝试访问elm1和elm2作为字符串，因此您应该删除'. 您的最后一行 addEventListener 可疑，我不明白您要做什么。

在 JS 中处理样式更改时的最佳实践是预先创建 CSS 类并使用 JS 动态更改该类。类似的东西：

const changeDisplay = (elm1, elm2) => {

     const E1 = document.getElementById(elm1);

     const E2 = document.getElementById(elm2);

     E1.className = 'display_none';

     E2.className = 'display_block';

     E1.addEventListener('click', /*FUNCTION*/);

     E2.addEventListener('click', /*FUNCTION*/);

   }

   changeDisplay('not', 'ok')