本文将介绍实现开始偶数块隐藏内容,点击奇数块,下一个偶数块显示与隐藏的功能,以一个div 下的多个P标签为例,示例代码:
<div class="entry-content">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
JavaScript 部分:
<script type='text/javascript'>
var cp = document.getElementsByClassName("entry-content")[0];
var list = cp.querySelectorAll('p');
for(var i=0; i<list.length; i++){
list[i].index = i;
}
for(var i=0; i<list.length; i++){
if (i%2) {
//console.log(i,list[i],"yes");
list[i].className = "display_none";
}
}
cp.addEventListener('click',function(e){
if (typeof list[e.target.index+1] !="undefined") {
if (list[e.target.index+1].getAttribute("class") === "display_none") {
list[e.target.index+1].className = "display_show";
} else {
list[e.target.index+1].className = "display_none";
}
}
})
</script>
附:js 获取 当前点击元素的索引
以ul下的li元素为例;获取li的索引,代码如下:
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
方法1:
把每个li元素加上index属性,每个li被点击时获取index属性即可
var ul = document.getElementById("list");
var list = ul.querySelectorAll('li');
for (var i = 0; i < list.length; i++) {
list[i].index = i;
}
ul.addEventListener('click',function(e){
console.log(e.target.index);
})
方法2:
获取ul下的所有li,找到被点击li在所有li中的位置
ul.addEventListener('click',function(e){
var item = e.target;
var lists = Array.from(ul.querySelectorAll('li'));
console.log(lists.indexOf(item));
})