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？ 展开
<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个回答
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
