为每个新的循环添加新的ID

Add new ID for every new loop

本文关键字：添加 ID 循环      更新时间：2023-09-26

我正在使用li标记开发一种循环。对于这个循环，我将使用一些文本，这些文本将通过我在单击某个地方时编写的简单的打开和关闭JavaScript代码显示。如你们所知，这种代码是通过getElementById属性来操作的。然而，由于我要循环这些列表项，所以我不能在它们之间重复id。那么，如何循环这些列表项而不重复ID呢?

看下面的HTML:

<section class="pro-further">
  <span>Consulte</span><br>
  <ul>
    <li><div onClick="furtherInfo('test');">Info one</div>
      <div id="test">Text for first info</div>
    </li>
    <li><div>Info two</div>
      <div>Text for second info</div>
    </li>
    <li><div>Info three</div>
      <div>Text for third info</div>
    </li>
    <li><div>Info four</div>
      <div>Text for fourth info</div>
    </li>
    <li><div>Info five</div>
      <div>Text for fifth info</div>
    </li>
    <li><div>Info six</div>
      <div>Text for sixth info</div>
    </li>
  </ul>
</section>

JavaScript…

var furtherInfo = function(auei) {
  var openInfo = document.getElementById(auei);
  if(openInfo.style.display == "block") {
    openInfo.style.display = "none"
  }else {
    openInfo.style.display = "block"
  }
}

和CSS

.pro-further ul {
  width:100%;
  list-style-type:none;
  margin-left:0px;
}
.pro-further ul li > div {
  width:99.3%;
  font-size:14px;
  color:#FFF;
  background:url(../images/plus2.png) #23459F no-repeat 99% 50%;
  padding:6px 2px 6px 5px;
  margin-bottom:3px;
  cursor:pointer;
}
.pro-further ul li > div + div {
  width:98.5%;
  font-size:13px;
  color:#737373;
  background:white;
  border:1px solid #23459F;
  padding:2px 5px 2px 5px;
  margin-top:-3px;
  display:none;
  cursor:text;
}

谢谢!

点击这里试用

你可以给每个项目一个类，然后使用document.getElementsByClassName()

循环遍历它们

在这里查看更多信息:如何getElementByClass而不是GetElementById与Javascript?

在这种情况下，您可以只使用DOM遍历，假设兄弟关系是恒定的:

var furtherInfo = function(el) {
    var openInfo = el.nextElementSibling;
  openInfo.style.display = openInfo.style.display == 'block' ? 'none' : 'block'
}

假设HTML如下:

<ul>
    <li><div onClick="furtherInfo(this);">Info one</div>
      <div id="test">Text for first info</div>
    </li>
    <li><div onClick="furtherInfo(this);">Info two</div>
      <div>Text for second info</div>
    </li>
    <!-- and so on... -->
  </ul>

JS提琴演示

这是一个无id的解决方案:

window.onload = function() {
    var elems = document.getElementsByTagName("li");
    for(var i = 0; i < elems.length; i++) {
        elems[i].onclick = toggle;
    }
};
function toggle() {
    var divs = this.getElementsByTagName("div");
    divs[1].style.display = ((divs[1].style.display == "block") ? "none" : "block");
}

限制"getElementsByTagName"，我建议给你的外部容器(与class="pro-further"一个ID，所以它看起来像<section id="pro-further-toggles">，然后你可以指定var elems = document.getElementById("pro-further-toggles").getElementsByTagName("li");

相关文章：