为每个新的循环添加新的ID
Add new ID for every new loop
我正在使用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");
相关文章:
- 动态添加id's到输入字段
- 通过Couchdb中的更新处理程序添加id和author字段
- 如何在CKEditor中为图像添加ID
- 添加ID's在一个P HTML标签中的一个翡翠模板中
- 向Fabric.js元素添加ID
- 如何添加id和额外的参数到一个放大弹出iframe与youtube视频,所以我可以控制与API youtube播放器
- 创建折叠选项卡并动态添加 ID 和指向 jQuery 中 ID 锚点的链接
- 使用 for 循环,如何迭代对象以向其添加 id 属性
- 在“挖空”中添加 ID
- 避免在向标记添加 ID 时触发 DOMSubtreeModified 事件
- 我无法在 foreach 中向对象添加 ID
- 使用主干视图在模板上动态添加 ID 和类
- 在Angular对象中循环时向HTML添加id
- 为Datatable中的行添加id
- 使用jQuery向子级添加id
- 如何仅在li元素存在的情况下向pre元素添加id
- 如何使用javascript从最近的li元素向pre-tag添加id
- 如何在javascript中向输入字段添加ID
- jQuery或Javascript单击函数更改或添加id
- 将jquery变量连接到字符串,以便添加id's转换为动态生成的输入字段