ajax传值改变对应样式（方法：定义属性）

html:

<!DOCTYPE html>
<html><head><metacharset="UTF-8"><title>个人中心</title><metaname="viewport"content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><metaname="format-detection"content="telephone=no, email=no"></head><linkrel="stylesheet"href="css/swipeslider.css" /><linkrel="stylesheet"href="css/public.css" /><linkrel="stylesheet"href="css/layer.css" /><linkrel="stylesheet"href="css/personalCenter.css" /><body><embedtype="text/html"src="header.html" /><nav><divclass="navs"><divclass="perss nleftimg"><ahref="#"><imgsrc="images/back.png"  /></a></div><divclass="perss personal"><h1>个人中心</h1></div><divclass="perss nrightimg"><imgsrc="images/shezhi.png"  /></div></div></nav><divclass="infcenters"><divclass="introduction"><divclass="introduc"><!--<div class="intleftimg intcont"><div class="intlimm"><img src="data:images/01.jpg"  /></div> </div>--><divclass="intright intcont"><divclass="inttopname"><!--<h1>名字名字</h1><p class="boy"><img src='images/boy@2x.png'/></p><p class="gril"><img src='images/gril@2x.png'/></p>--></div><divclass="intbottombut"><!--<div class="banyuanleft"></div><div class="dabutton"><a href="fileSetting.html"> </a>档案设置</div><div class="banyuanright"></div>--></div></div></div></div><divclass="registration"><divclass="regis"><h2>我的挂号单</h2><ahref="registrationForm.html">查看更多</a></div></div><center><divclass="center"><divclass="centinforms"><imgclass="topinfrig"src="images/rigtiaowen.png"  /><imgclass="topinlef"src="images/yxtiaowe.png"  /><divclass="infonames"><p><spanclass="renminse">黄轩</span>内分泌科</p><divclass="clidimg"><imgsrc="images/del.png" /></div></div><divclass="infbottom"><divclass="botjiuxhengr"><p>就诊人：周凡婷</p><span>已预约</span><button>取消预约</button></div></div></div></div><divclass="center"><divclass="centinforms"><imgclass="topinfrig"src="images/rigtiaowen.png"  /><imgclass="topinlef"src="images/yxtiaowe.png"  /><divclass="infonames"><p><spanclass="renminse">黄轩</span>内分泌科</p><divclass="clidimg"><imgsrc="images/del.png" /></div></div><divclass="infbottom"><divclass="botjiuxhengr"><p>就诊人：周凡婷</p><span>已预约</span><button>取消预约</button></div></div></div></div><divclass="center"><divclass="centinforms"><imgclass="topinfrig"src="images/rigtiaowen.png"  /><imgclass="topinlef"src="images/yxtiaowe.png"  /><divclass="infonames"><p><spanclass="renminse">黄轩</span>内分泌科</p><divclass="clidimg"><imgsrc="images/del.png" /></div></div><divclass="infbottom"><divclass="botjiuxhengr"><p>就诊人：周凡婷</p><span>已预约</span><button>取消预约</button></div></div></div></div></center></div>    </body><scripttype="text/javascript"src="js/rem.js" ></script><scripttype="text/javascript"src="js/jquery-2.1.1.min.js" ></script><scripttype="text/javascript"src="js/layer.js" ></script><scripttype="text/javascript"src="js/personalCenter.js" ></script>
</html>

css:

/*introduction*/.infcenters{width:100%;height:100%;background:white;
}.introduction{width:100%;height:2.1rem;
}.introduc{width:6.46rem;height:2rem;margin:0 auto;display:-webkit-flex;display:flex;border-bottom:0.01rem solid #e1e1e1e1;
}.intleftimg{display:-webkit-flex;display:flex;align-items:center;justify-content:center;
}.intright{width:6.46rem;display:-webkit-flex;display:flex;flex-direction:row;align-items:center;justify-content:space-between;
}.inttopname , .intbottombut{display:-webkit-flex;display:flex;justify-content:flex-start;align-content:flex-end;
}.intbottombut{width:2.12rem;height:0.56rem;
}.inttopname{position:relative;width:100%;
}.inttopname h1{font-size:0.46rem;font-weight:bolder;margin-left:0.3rem;
}.inttopname p{position:absolute;width:0.4rem;height:0.4rem;top:0.2rem;left:2.3rem;display:none;
}.dabutton{width:2.7rem;height:0.56rem;background:white;border-top:0.01rem solid #00a09d;border-bottom:0.01rem solid #00a09d;display:-webkit-flex;display:flex;align-items:center;justify-content:center;font-size:0.3rem;font-weight:bolder;color:#00a09d;
}.dabutton a{color:#00a09d;
}.banyuanleft{width:0.5rem;height:0.56rem;border-radius:1.5rem 0 0  1.5rem;border-top:0.01rem solid #00a09d;border-left:0.01rem solid #00a09d;border-bottom:0.01rem solid #00a09d;background:white;
}.banyuanright{width:0.5rem;height:0.56rem;border-radius:0 1.5rem 1.5rem 0;border-top:0.01rem solid #00a09d;border-right:0.01rem solid #00a09d;border-bottom:0.01rem solid #00a09d;background:white;
}
/*introduction*/
/*闁圭鍊歌ぐ鍧楀础閿燂拷*/.registration{width:100%;height:1rem;background:white;
}.regis{width:6.46rem;height:100%;margin:0 auto;display:-webkit-flex;display:flex;align-items:center;justify-content:space-between;
}.regis h2{font-size:0.36rem;font-weight:bolder;
}.regis a{color:#6498f0;font-size:0.24rem;
}
/*闁圭鍊歌ぐ鍧楀础閿燂拷*/
/*center*/center{width:100%;height:100%;
}.center{width:7.1rem;height:auto;padding:0.25rem 0;background:#fff;
}.centinforms{width:100%;height:2.1rem;position:relative;border-radius:5%;-webkit-box-shadow:#888 0 0 0.1rem;-moz-box-shadow:#888 0 0 0.1rem;box-shadow:#888 0 0 0.01rem;  }.centinforms .topinfrig{width:0.76rem;height:0.44rem;background-repeat:no-repeat;position:absolute;top:-0.01rem;left:6.35rem;
}.centinforms .topinlef{width:0.76rem;height:0.44rem;background-repeat:no-repeat;position:absolute;top:1.67rem;left:-0.01rem;
}.infonames{width:6.08rem;height:0.85rem;border-bottom:0.01rem solid #e1e1e1;display:-webkit-flex;display:flex;align-items:center;justify-content:space-between;
}.infonames p{font-size:0.25rem;
}.infonames .renminse{font-size:0.32rem;margin-right:0.4rem;
}.clidimg{width:0.4rem;height:0.4rem;
}.clidimg img{width:100%;height:100%;
}.infbottom{width:6.08rem;height:1.2rem;display:flex;align-items:center;justify-content:space-between;
}.botttime{display:-webkit-flex;display:flex;justify-content:space-between;margin:0.1rem 0;
}.botttime p{font-size:0.27rem;
}.botttime span{margin-left:0.5rem;
}.botjiuxhengr{display:-webkit-flex;display:flex;}.botjiuxhengr p{font-size:0.27rem;flex:0 0 35%;display:-webkit-flex;display:flex;align-content:center;justify-content:flex-start;
}.botjiuxhengr span{font-flex:0 0 25%;color:#58b5b3;display:flex;align-content:center;justify-content:center;display:inline-block;width:3rem;font-size:0.3rem;
}.botjiuxhengr button{flex:0 0 30%;width:1.50rem;height:0.50rem;border-radius:5%;display:flex;align-content:center;justify-content:center;color:#6498f0;background:white;border:0.01rem solid #6498f0;font-size:0.3rem;
}
/*.appcent{color:#6498f0;border:0.01rem solid #6498f0;background:white;disabled:disabled;
}
.yunappcent{border: 0.01rem solid #6498f0;background: white;color: #6498f0;disabled:none;
}*/

js:

var id=241;
$(function(){var id=241;var sex=0;var name='周凢';loadPersonal(id,name,sex);judgeSex(sex);loadReservations(id);})functionloadPersonal(id,name,sex){$(".inttopname").append("<h1>"+name+"</h1><p class='boy'><img src='images/boy@2x.png'/></p><p class='gril'><img src='images/gril@2x.png'/></p>");$(".intbottombut").append("<div class='banyuanleft'></div>"+"<div class='dabutton' οnclick='clickFile("+id+")'>档案设置</div>"+"<div class='banyuanright'></div>")
}functionloadReservations(id){$.ajax({url:"/hospitalmanage/user/getschinfo.do",type:"post",dataType:"json",data:{"id":id},success:function(data){console.log(data);$("center").html("");for(var i=0;i<data.data.length;i++){if(i<=3){$("center").append("<div class='center'>"+"<div class='centinforms'>"+"<div class='infonames'>"+"<p><span class='renminse'>"+data.data[i].doctorName+"</span>"+data.data[i].org+"</p>"+"<div class='clidimg' οnclick='deleteOrcancel("+data.data[i].id+",1)'><img src='images/del.png' /></div>"+"</div>"+"<div class='infbottom'>"+"<div class='botttime'>"+"<p>"+data.data[i].date+"</p>"+"</div>"+"<div class='botjiuxhengr'>"+"<p>就诊人："+data.data[i].patientName+"</p>"+"<span id='makapp'>"+makeAppointment(data.data[i].stat)+"</span>"+"<button id='delebutton' status='"+data.data[i].stat+"' οnclick='deleteOrcancel("+data.data[i].id+",0)'>"+makeAppbtn(data.data[i].stat)+"</button>"+"</div>"+    "</div>"+"<img class='topinfrig' src='images/rigtiaowen.png'  /><img class='topinlef' src='images/yxtiaowe.png'  />"+"</div>"+"</div>"+"</div>");$("button[status='0']").css("color","#6498f0");$("button[status='0']").css("disabled","");$("button[status='1']").css("color","#999");$("button[status='1']").attr("disabled","disabled");}}}});
}//预约
functionmakeAppointment(stat){switch(stat){case 0:return "已预约";case 1:return "已取消预约";default:return "";}
}functionmakeAppbtn(stat){switch(stat){case 0:return "取消预约";case 1:return "预约";default:return "";}}//删除//取消预约
functiondeleteOrcancel(doid,delnum){if(delnum==0){//取消var title="取消预约成功";}else{var title="删除成功";}$.ajax({url:"/hospitalmanage/user/delyyjl.do",type:"post",dataType:"json",data:{"id":doid,"flg":delnum},success:function(data){layer.msg(title);loadReservations(id);}});
}//跳转档案
functionclickFile(id){location.href='fileSetting.html?id='+id;
}//sex
functionjudgeSex(sex){if(sex==0){$(".boy").css("display","block");$(".gril").css("display","none");}else{$(".gril").css("display","block");$(".boy").css("display","none");}
}//显示年份
functiongetNowFormatDate() {var date = newDate();currentdate=date.getFullYear();returncurrentdate;
}

转载于:https://www.cnblogs.com/fanting/p/9372739.html

ajax传值改变对应样式（方法：定义属性）相关推荐

【ajax】前端ajax传值的几种方法
前端ajax传值的几种方法注意事项 1.传值格式 2.ajax在sucecess后继续执行代码 3.传值方式传图片文件到后端正常传本博文仅为记录项目过程中遇到的熟练代码注意事项 1.传值格式 ...
js改变css样式方法
例如一个列表,其中有已回复和未回复两种状态,当你循环判断渲染之后又无法写两个样式先写样式 .moren{background-color: #4888ED ;color: #fff;padding: ...
classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式
文章目录知识储备 1.正则表达式 2.Syntax上需要注意的问题 3.属于多个类的情况下,样式的覆盖情况方法一:改变内联样式方法二: `classList`属性配合`add()`.`remov ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
js函数改变html样式,JavaScript改变CSS样式的方法汇总
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样 ...
jquery改变html样式表,jQuery CSS()方法改变现有的CSS样式
jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代 ...
html通过id设置css样式,JavaScript修改style,id,class等css属性样式方法总结
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样 ...
css如何调整红心样式_jQuery CSS()方法改变CSS样式
jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代 ...
UIView及其分类的属性方法定义
UIView是iOS开发中最熟悉的控件,不是因为它用得多,而是很多UI控件都是继承它的,了解它的分类方法是很有必要的. UIView其实是由多个分类构成,主要有如下几个分类: UIView :基本属性 ...

ajax传值改变对应样式（方法：定义属性）

ajax传值改变对应样式（方法：定义属性）相关推荐

最新文章

热门文章