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

Question

So I have an Array and I would like to be able to hide and show each element of the array just by clicking it using vanilla JavaScript. 因此，我有一个数组，我希望能够通过使用普通JavaScript单击该数组来隐藏和显示该数组的每个元素。 Although I am a little confused on how to use the getElementById in this instance because it's an array... 尽管在这种情况下我对如何使用getElementById感到有些困惑，因为它是一个数组...

HTML: 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: 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);

} }

Answer 1

It sounds like you're trying to display each of the array items in a list, and toggle the array items' visibility on click. 听起来您正在尝试在列表中显示每个数组项，并在单击时切换数组项的可见性。 If I'm understanding your question correctly, here's one way to do that: 如果我正确理解了您的问题，则可以采用以下一种方法：

 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>

This code loops through your sender array and assigns each array element to a <li> . 此代码循环遍历sender数组，并将每个数组元素分配给<li> 。 Each <li> is placed inside a <span> for the purpose of handling any clicks and toggling the item to be visible or hidden. 每个<li>放置在<span> ，目的是处理所有单击并切换显示或隐藏的项目。

Clicking on each list item (which is populated from your sender array) will hide that item if it's currently visible, or show it if it's currently hidden. 单击每个列表项（从sender数组填充），如果该项目当前可见，则将其隐藏；如果当前隐藏，则将其显示。

Unless the <li> 's IdName property serves another purpose not seen here, you can remove this line from your code: 除非<li>的IdName属性具有此处未看到的其他目的，否则您可以从代码中删除以下行：

liBody.IdName = "main";

You also had an extra </div> tag that shouldn't be there, and unless the names in your array are actually variables, your array declaration should like this: 您还应该有一个额外的</div>标记，该标记不应存在，除非数组中的名称实际上是变量，否则数组声明应如下所示：

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

rather than this: 而不是这样：

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

Answer 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>

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

问题描述

2 个解决方案

解决方案1
0 2017-10-30 20:22:24

解决方案2
-1 2017-10-30 20:50:28

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

问题描述

2 个解决方案

解决方案1 0 2017-10-30 20:22:24

解决方案2 -1 2017-10-30 20:50:28

解决方案1
0 2017-10-30 20:22:24

解决方案2
-1 2017-10-30 20:50:28