2020-07-16

JavaScript实现点击奇数行隐藏和显示偶数行

本文将介绍实现开始偶数块隐藏内容,点击奇数块,下一个偶数块显示与隐藏的功能,以一个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));
})

发表回复

Your email address will not be published. Required fields are marked *