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

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>个人中心</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="format-detection" content="telephone=no, email=no">
    </head>
    <link rel="stylesheet" href="css/swipeslider.css" />
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/layer.css" />
    <link rel="stylesheet" href="css/personalCenter.css" />
    <body>
        <embed type="text/html" src="header.html" />
        <nav>
            <div class="navs">
                <div class="perss nleftimg">
                    <a href="#"><img src="images/back.png"  /></a>
                </div>
                <div class="perss personal">
                    <h1>个人中心</h1>
                </div>
                <div class="perss nrightimg">
                    <img src="images/shezhi.png"  />
                </div>
            </div>
        </nav>
    <div class="infcenters">
        <div class="introduction">
            <div class="introduc">
                <!-- <div class="intleftimg intcont">
                <div class="intlimm">
                    <img src="images/01.jpg"  />
                </div> 
                </div>-->
                <div class="intright intcont">
                    <div class="inttopname">
                        <!-- <h1>名字名字</h1>
                        <p class="boy"><img src='images/boy@2x.png'/></p>
                        <p class="gril"><img src='images/gril@2x.png'/></p> -->
                    </div>
                    <div class="intbottombut">
                        <!-- <div class="banyuanleft"></div>
                        <div class="dabutton"><a href="fileSetting.html"> </a>档案设置</div>
                        <div class="banyuanright"></div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="registration">
            <div class="regis">
                <h2>我的挂号单</h2>
                <a href="registrationForm.html">查看更多</a>
            </div>
        </div>
        <center>
            <div class="center">
                <div class="centinforms">
                    <img class="topinfrig" src="images/rigtiaowen.png"  /><img class="topinlef" src="images/yxtiaowe.png"  />
                    <div class="infonames">
                        <p><span class="renminse">黄轩</span>内分泌科</p>
                        <div class="clidimg">
                            <img src="images/del.png" />
                        </div>
                    </div>
                    <div class="infbottom">
                        <div class="botjiuxhengr">
                            <p>就诊人：周凡婷</p>
                            <span>已预约</span>
                            <button>取消预约</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="centinforms">
                    <img class="topinfrig" src="images/rigtiaowen.png"  /><img class="topinlef" src="images/yxtiaowe.png"  />
                    <div class="infonames">
                        <p><span class="renminse">黄轩</span>内分泌科</p>
                        <div class="clidimg">
                            <img src="images/del.png" />
                        </div>
                    </div>
                    <div class="infbottom">
                        <div class="botjiuxhengr">
                            <p>就诊人：周凡婷</p>
                            <span>已预约</span>
                            <button>取消预约</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="centinforms">
                    <img class="topinfrig" src="images/rigtiaowen.png"  /><img class="topinlef" src="images/yxtiaowe.png"  />
                    <div class="infonames">
                        <p><span class="renminse">黄轩</span>内分泌科</p>
                        <div class="clidimg">
                            <img src="images/del.png" />
                        </div>
                    </div>
                    <div class="infbottom">
                        <div class="botjiuxhengr">
                            <p>就诊人：周凡婷</p>
                            <span>已预约</span>
                            <button>取消预约</button>
                        </div>
                    </div>
                </div>
            </div>
        </center>
    </div>    
    </body>
    <script type="text/javascript" src="js/rem.js" ></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
    <script type="text/javascript" src="js/layer.js" ></script>
    <script type="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);
    
})
function loadPersonal(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' onclick='clickFile("+id+")'>档案设置</div>"+
                        "<div class='banyuanright'></div>")
}
function loadReservations(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' onclick='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+"' onclick='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");
                }
                
            }
            
        }
    });
}
//预约
function makeAppointment(stat){
    switch(stat){
    case 0:
        return "已预约";
    case 1:
        return "已取消预约";
    default:
        return "";
    }
}
function makeAppbtn(stat){
    switch(stat){
    case 0:
        return "取消预约";
    case 1:
        return "预约";
    default:
        return "";
    }
    
}
//删除//取消预约
function deleteOrcancel(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);
        }
    });
}
//跳转档案
function clickFile(id){
    location.href='fileSetting.html?id='+id;
}
//sex
function judgeSex(sex){
    if(sex==0){
        $(".boy").css("display","block");
        $(".gril").css("display","none");
    }else{
        $(".gril").css("display","block");
        $(".boy").css("display","none");
    }
}
//显示年份
function getNowFormatDate() {
    var date = new Date();
    currentdate = date.getFullYear();
    return currentdate;
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fanting/p/9372739.html