如何在没有 jQuery 的情况下隐藏和显示数组元素答案

【问题标题】：How to hide and show array elements without jQuery如何在没有 jQuery 的情况下隐藏和显示数组元素
【发布时间】：2017-10-30 19:58:20
【问题描述】：

所以我有一个数组，我希望能够通过使用 vanilla JavaScript 单击它来隐藏和显示数组的每个元素。虽然我对如何在这种情况下使用 getElementById 有点困惑，因为它是一个数组......

HTML：

<html>
<head>
  <script src="js/sender.js"></script>
  <link href="css/style.css" rel="style" media="screen">
  <script>
  </script>
</head>

<body>
  <div class="sub" id="main">
  </div>
  <ol id="list"></ol>
  </div>
</body>
</html>

JavaScript：

var sender:[bob, sally, syke, lucy, larry,];
for(var i =0; i<sender.length; i++){
var liBody = document.createElement("li");
liBody.IdName = "main";
liBody.innerHTML = sender[i]; 
document.body.appendChild(liBody);

}

【问题讨论】：

var sender:[bob, sally, syke, lucy, larry,]; 应该是什么？
对不起！它是我正在尝试使用的一系列信息。
你会点击什么来显示每个数组项？
这不是一个完整的代码。什么是试图点击？您应该能够使用 for 循环打印所有数组项。我可以帮忙，但你需要发布完整的代码
欢迎来到 SO。请查看tour。您可能还想查看What topics can I ask about 和How to Ask，以及如何创建minimal reproducible example。发布您尝试过的代码和您收到的错误。尽可能具体，因为它会带来更好的答案。

标签： javascript html css onclick show-hide

【解决方案1】：

听起来您正试图在列表中显示每个数组项，并在单击时切换数组项的可见性。如果我正确地理解了您的问题，这里有一种方法：

var sender = ["bob", "sally", "syke", "lucy", "larry"];
var myList = document.getElementById('list');

for (var i = 0; i < sender.length; i++) {
  var liBody = document.createElement("li");
  var spanWrapper = document.createElement("span");  //wrapper to handle the clicks
  spanWrapper.style.display = "block";
  liBody.IdName = "main";
  liBody.innerText = sender[i]; //pulling value from sender array
  liBody.style.visibility = "visible";
  spanWrapper.addEventListener('click', function() { //add click handler
    if (this.childNodes[0].style.visibility == "visible") {
      this.childNodes[0].style.visibility = "hidden";  //hide item
    } else {
      this.childNodes[0].style.visibility = "visible";  //show item
    }
  });
  spanWrapper.appendChild(liBody);  //add list item to its span wrapper
  myList.appendChild(spanWrapper); //add span wrapper to the list
}

<div class="sub" id="main">
  <ul id="list"></ul>
</div>

此代码循环遍历您的sender 数组并将每个数组元素分配给<li>。每个<li> 都放置在<span> 中，用于处理任何点击并将项目切换为可见或隐藏。

单击每个列表项（从您的 sender 数组中填充）将在当前可见时隐藏该项目，如果当前隐藏则显示它。

除非<li> 的IdName 属性用于此处未显示的其他用途，否则您可以从代码中删除此行：

liBody.IdName = "main";

你还有一个额外的 </div> 不应该存在的标签，除非你的数组中的名称实际上是变量，否则你的数组声明应该是这样的：

var sender = ["bob", "sally", "syke", "lucy", "larry"];

而不是这样：

var sender:[bob, sally, syke, lucy, larry,];

【讨论】：

哦，这很有意义。那么每个 li 都设置成不同的 span？
@KrishnaPatel 你明白了。每个span 只是li 的包装，因此当您单击li 并使其消失时，当您再次单击以使其重新出现时，仍有一些内容需要注册。

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<ul id="list"></ul>


<script>
    list = document.getElementById('list');
    items = ['item 0', 'item 1', 'item 2'];
    for (x = 0; x < items.length; x++) {
        li = document.createElement('li');
        li.appendChild(document.createTextNode(items[x]));
        list.appendChild(li);
        list.childNodes[x].setAttribute('onclick', 'hide(' + x + ')');
    }

    function hide(pos) {
        list.childNodes[pos].style.display = 'none';
    }


</script>


</body>
</html>

【讨论】：