js 多个按钮控制多个DIV的隐藏和显示

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb... <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>RunJS</title>
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script>
var n=3;
onload=function(){
var box=document.querySelector(".box");
var ps=box.querySelectorAll("p");
var btn=box.querySelector("button");
if(ps.length<n){
btn.style.display="none";
return;
}
for(var i=n;i<ps.length;i++){
ps[i].style.display="none";
}
btn.onclick=function(){
for(var i=n;i<ps.length;i++){
ps[i].style.display="block";
}
this.style.display="none";
}
}
</script>
</head>
<body>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
</body>
</html>

只能控制一个，要怎么能控制多个DIV？展开

 我来答

1个回答

#合辑# 面试问优缺点怎么回答最加分？

匿名用户
2017-12-02

展开全部

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>RunJS</title>
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script>
var n=3;
onload=function(){
var boxs=document.querySelectorAll(".box");
	for(var k=0;k<boxs.length;k++){
		var box=boxs[k];
	var ps=box.querySelectorAll("p");
var btn=box.querySelector("button");
if(ps.length<n){
btn.style.display="none";
continue; 
}
for(var i=n;i<ps.length;i++){
ps[i].style.display="none";
}
btn.onclick=function(){
for(var i=n;i<ps.length;i++){
ps[i].style.display="block";
}
this.style.display="none";
}
	}

}
</script>
</head>
<body>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
<div class="box">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
<p>我是内容5</p>
<p>我是内容6</p>
<button>点击显示全部</button>
</div>
</body>
</html>

追问

点击第1个按钮还是第2个按钮，都是第三个DIV显示全部，然而第1个和第2个DIV不显示隐藏内容，请问如何解决？

追答


    <script>
        var n = 3;
        onload = function() {
            var boxs = document.querySelectorAll(".box");
            for (var k = 0; k < boxs.length; k++) {
                var box = boxs[k];
                var ps = box.querySelectorAll("p");
                var btn = box.querySelector("button");
                if (ps.length < n) {
                    btn.style.display = "none";
                    continue;
                }
                for (var i = n; i < ps.length; i++) { 
                    ps[i].style.display = "none";
                }
		(function(ps){
		btn.onclick = function() {
                    for (var i = n; i < ps.length; i++) {
                        ps[i].style.display = "block";
                    }
                    this.style.display = "none";
                }
                })(ps);
            }
        }
    </script>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js 多个按钮控制多个DIV的隐藏和显示

其他类似问题

为你推荐：