백그라운드에서 추출된 데이터, 각 데이터에 대해 동적으로 확장/축소 상태 설정
<div id="cs_wrap"></div> css
.on{display: block}
.off{display: none}
.wrap{
margin:15px 300px;
padding: 0;
border: 1px solid #E8E8E8;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px #E8E8E8;
-webkit-box-shadow: 0 1px 1px #E8E8E8;
box-shadow: 0 1px 1px #E8E8E8;
background-color: #f9f8f7
}
.head{
border-bottom: 1px solid #E8E8E8;
padding:12px;
background-color: #ffffff;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.body{
height: 200px;
border: 1px solid #dcdcdc;
} js
/////////////////////////////////////////////
var control_show=new Object();
function judge_object(body){
var csObject=control_show[body];
if(csObject){
return csObject['status'];
}
else{
control_show[body]=new Object();
control_show[body]['status']=1;//
return control_show[body]['status'];
}
}
//////////////////////////////////////////////
function init(){
$.ajax({
type:"post",
url:"cs.php",
data:"action=get",
success:function(result){
var htmlStr = "";
var len = result.length;
for(var i=0;i<len;i++){
var class_name='body ';
var flag;
flag=judge_object("body_"+i);
if(flag==1){
class_name+='on';
}else{
class_name+='off';
}
htmlStr+="<div class='wrap'>" +
"<div class='head'><button onclick='toggle(this)'> / </button></div>" +
"<div class='"+class_name+"' id='body_"+i+"'>"+result[i].dev_name+"</div>" +
"</div>"
}
$("#cs_wrap").html(htmlStr);
}
})
}
init();
var timeer = window.setInterval(function(){
init();
},2000)
function toggle(obj){
$(obj).parent().next().slideToggle();
var bodyID = $(obj).parent().next().attr("id");
control_show[bodyID]['status']= control_show[bodyID]['status']==1?0:1;
} php f 반환 데이터 형식
[{"dev_name":"ram"},{"dev_name":"usb"},{"dev_name":"flash"}]
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.