老师那个科室排班表js部分那个索引不知道为什么获取不到效果图实现不了，每天+1天的日期也有问题

<!DOCTYPE html>

<html>

<head>

<title>scheduling</title>

</head>

<body>

<span class="welcome">欢迎来到城市医院预约挂号统一平台 请 </span>

</div>

</div>

</div>

<a href="#" class="link">按医院挂号</a>

<a href="#" class="link">按科室挂号</a>

<a href="#" class="link">按疾病挂号</a>

<a href="#" class="link right">社会知名医院</a>

</div>

<span>北京协和医院</span>

<span>中国医科所属医院</span>

</div>

<div class="address">[东院]北京市东城区帅府园一号[西园]北京市西城区大木仓胡同41号</div>

<div class="web">http://www.divumch.cn/</div>

<div class="phone2">东院咨询台：010-69155564；西园咨询台：010-69158010</div>

<div class="two">东院：106,108,110,111,116,684,685到东单路口北；41,104快，814到东单路</div>

<div class="three">103,104,420,803到新东安市场；地铁1、5号线到东单。西院：68到薛才胡同东

口；更多乘车路线详见须知</div>

</div>

</div>

<span>科室排班表</span>

<a href="index.html">返回科室列表</a>

</div>

</div>

</div>

</div>

<div class="content-side-text-time">停挂时间：<p>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</p></div>

<div class="content-side-text-time">退号时间：<p>就诊前一工作日14:00前取消</p></div>

①   取号地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东园区预约取号地点：东园区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/ 收费窗口取号。<br/><br/><br/></span></div>

</div>

您还没有选择就诊日期

</div>

</div>

</body>

</html>

margin:0;

padding:0;

}

/*清除浮动*/

.clearfix{

content:'';

clear:both;

zoom:1;

}

text-decoration:none;

}

.wrap{

width:1000px;

margin:0 auto;

}

/*top区域*/

.top{

width:100%;

height:30px;

background:#f5f5f5;

font-size:12px;

line-height:30px;

overflow:hidden;

color:#868686;

}

.top .phone{

background: url('../img/icon-call.png') left no-repeat;

padding-left:20px;

}

.top .right{

float:right;

}

.top .right .welcome{

padding-right:30px;

}

.top .right .help{

margin-left:70px;

}

.top .wrap a{

color:#2da5e1;

}

/*header区域*/

.header{

height:92px;

}

.header .wrap{

position:relative;

}

.header img{

width: 354px;

height: 61px;

margin-top:15px;

}

.header .search{

height:38px;

width:326px;

position:absolute;

top:30px;

right:0px;

}

/*nav区域*/

.nav{

width:100%;

height:36px;

background:#60bff2;

}

.nav .link{

display:inline-block;

height:36px;

line-height:36px;

color:#fff;

font-size:16px;

}

.nav a:first-child{

margin:0px 53px;

}

.nav a:nth-of-type(3),

.nav a:nth-of-type(4),

.nav a:nth-of-type(5){

margin-left:30px;

}

.nav .right{

float:right;

}

/*医院简介区域*/

.content{

width:1000px;

margin:0 auto;

background:#f7f7f7;

height:260px;

margin-top:30px;

}

.content .content-nav{

height:53px;

margin:0 25px;

border-bottom:1px solid #dcdddd;

line-height:53px;

}

.content .content-nav .one{

font-size:12px;

color:#f29600;

margin-left:10px;

}

.content .content-nav-right{

float:right;

font-size:12px;

font-weight:bold;

}

.content .content-nav-right span:nth-child(2n-1){

color:#0000ff;

margin-left:5px;

}

/*医院简介主体部分*/

.content .content-main{

margin:10px 25px;

position:relative;

}

/*医院简介部分中间内容*/

.content .content-main .content-main-text{

display:inline-block;

width:450px;

margin-left:30px;

font-size:12px;

color:#888888;

position:absolute;

left:200px;

top:10px;

}

.content .content-main .content-main-text .address{

background:url('../img/icon-web.png') no-repeat;

padding-left:25px;

margin-bottom:10px;

}

.content .content-main .content-main-text .web{

background:url('../img/icon-web.png') 0 -21px no-repeat;

padding-left:25px;

margin-bottom:10px;

}

.content .content-main .content-main-text .phone2{

background:url('../img/icon-web.png') 0 -44px no-repeat;

padding-left:25px;

margin-bottom:10px;

}

.content .content-main .content-main-text .two{

background:url('../img/icon-web.png') 0 -64px no-repeat;

padding-left:25px;

}

.content .content-main .content-main-text .three{

text-align:left;

padding-left:25px;

}

/*医院简介右侧地图图片*/

.content .content-main .map img{

width:250px;

height:165px;

position:absolute;

right:0px;

top:0px;

}

/*科室排班表*/

.content-body{

margin-top:47px;

}

.content-body .content-body-header span{

margin:0px 10px;

}

.content-body .content-body-header a{

color:#00b3ec;

font-size:14px;

margin-left:5px;

}

/*科室排班表主体内容*/

.content-body-main{

margin-top:18px;

width:100%;

/*height:390px;*/

position:relative;

}

/*科室排班表表单内容*/

.content-body-main .content-body-main-left{

width:730px;

height:330px;

position:relative;

}

/*科室排班表表单内容左按钮*/

.content-body-main .content-body-main-left .left{

width:38px;

height:325px;

float:left;

}

.content-body-main .content-body-main-left .left .icon-scheduling-left{

width:38px;

height:45px;

border:1px solid #dcdddd;

background:url(../img/icon-scheduling-left.jpg) center no-repeat;

}

.content-body-main .content-body-main-left .left .day{

width:38px;

height:283px;

border-left:1px solid #dcdddd;

background:#f2f8ff;

}

.content-body-main .content-body-main-left .left .day .am,.pm,.eve{

height:93px;

width:38px;

text-align:center;

line-height:93px;

}

/*科室排班表表单内容中间表格*/

.content-body-main .content-body-main-left .middle{

width:652px;

height:329px;

margin:0 38px;

overflow:hidden;

position:relative;

}

.content-body-main .content-body-main-left .middle .ui-slider{

width:999999px;

position:absolute;

top:0;

left:0;

}

.content-body-main .content-body-main-left .middle .column{

width:91px;

height:329px;

border:1px solid #dcdddd;

float:left;

text-align:center;

}

.content-body-main .content-body-main-left .middle .column .data{

width:91px;

height:45px;

border-top:1px solid #dcdddd;

background:#f8fafc;

}

.content-body-main .content-body-main-left .middle .column .ran{

width:91px;

height:93px;

}

.content-body-main .content-body-main-left .middle .column .ok{

width:91px;

height:93px;

background:#e0eefd;

text-align:center;

line-height:93px;

}

/*科室排班表表单内容右按钮*/

.content-body-main .content-body-main-left .right{

width:40px;

height:325px;

position:absolute;

right:0;

top:0;

}

.content-body-main .content-body-main-left .right .icon-scheduling-right{

width:38px;

height:45px;

border-top:1px solid #dcdddd;

background:url(../img/icon-scheduling-right.jpg) center no-repeat;

}

.content-body-main .content-body-main-left .right .abc{

width:38px;

height:283px;

background:#f2f8ff;

}

/*科室排班表排班规则*/

.content-body-main .content-body-main-right{

width:268px;

height:327px;

border:1px solid #dcdddd;

position:absolute;

top:0;

right:0;

overflow:auto;

}

.content-body-main-right .content-side-top{

font-size:16px;

color:#000;

margin-top:20px;

}

.content-body-main-right .content-side-text{

height:240px;

padding-left:10px;

}

.content-body-main-right .content-side-text .content-side-text-time{

font-size:14px;

color:#555555;

margin-top:8px;

}

.content-body-main-right .content-side-text .content-side-text-time p{

font-size:13px;

color:#888888;

}

/*科室排班表下方*/

.content-body-main .scontent-body-main-bottom{

width:100%;

height:64px;

border:1px solid #dcdddd;

line-height:64px;

text-align:center;

color:#9f9f9f;

}

/*页脚部分*/

.footer{

height:70px;

width:100%;

background:#eceef2;

text-align:center;

line-height:70px;

font-size:12px;

color:#acacac;

margin-top:100px;

}

/*搜索*/

.ui-search{

background: url('../img/ui-search.jpg') center no-repeat;

font-size:14px;

color:#fff;

position:relative;

}

.ui-search .ui-search-select{

width:70px;

height:38px;

line-height:38px;

position:absolute;

top:0;

left:14px;

cursor:pointer;

}

.ui-search-select-list{

position:absolute;

width:67px;

line-height:24px;

background-color:#fff;

box-shadow:3px 3px 5px rgba(0,0,0,.2);

top:36px;

left:2px;

display:none;

}

.ui-search-select-list a{

display:block;

color:#a5a2a2;

text-align:center;

}

.ui-search-select-list a:hover{

background-color:#ebeef5;

}

.ui-search-input{

width:213px;

height:28px;

line-height:28px;

position:absolute;

top:3px;

left:68px;

font-size:13px;

color:#a5a2a2;

}

.ui-search-submit{

display:block;

width:40px;

height:38px;

position:absolute;

top:1px;

right:0;

}

//ui-search

$.fn.UiSearch=function(){

var ui=$(this);

$('.ui-search-select',ui).on('click',function(){

$('.ui-search-select-list').show();

return false;

});

$('.ui-search-select-list a',ui).on('click',function(){

$('.ui-search-select').text($(this).text());

$('.ui-search-select-list').hide();

return false;

});

$('body').on('click',function(){

$('.ui-search-select-list').hide();

})

}

$.fn.UiSlider=function(){

// 添加元素到html中

for (var i = 0; i < 49; i++) {

var today=new Date(),

year=today.getFullYear(),

month=today.getMonth()+1,

now=today.getDate()+i,

week=today.getDay()+i,

weeks=["日","一","二","三","四","五","六"],

hour=today.getHours(),

minute=today.getMinutes(),

second=today.getSeconds();

if(week>=7){week-=7;}

if(now>=31){now-=31;}

$('.ui-slider').append('<div class="column"><div class="data">'+"星期"+weeks[week]+'<br>'+year+'-'+month+'-'+now+'</div><div class="ran"></div><div class="ok">约满</div><div class="ran"></div></div>');

}

var ui=$(this);

var left=$('.left .icon-scheduling-left',ui);

var right=$('.right .icon-scheduling-right',ui);

var wrap=$('.middle .ui-slider',ui);

var item=$('.middle .ui-slider .column',ui);

//预定义

var size=item.size();

var width=item.eq(0).width()*7;

//具体操作

wrap.on('move_right',function(event,index){

wrap.css('left',width*index*-1);

})

//事件

right.on('click',function(){

var index=$(this).index();

//索引获取不到

wrap.triggerHandler('move_right',index);

// debugger

})

}

//页面脚本逻辑

$(function(){

$('.ui-search').UiSearch();

$('.ui-slider-all').UiSlider();

})

慕无忌5312346 2019-06-01

源自：实战：挂号平台首页 5-12 项目作业

收起

1回答

好帮手慕星星 2019-06-01 19:06:31

你好，代码中的问题：

（1）$(this)获取的是按钮，不能根据按钮的索引进行判断，需要自己设置索引值。

（2）后面的日期显示不正确，建议不要先获取今天的月份和星期然后再进行加减，这样很容易错误，可以将天计算成毫秒，计算出每一天的时间戳，然后将时间戳进行日期设置再获取即可。

参考修改：

自己重新测试下，祝学习愉快！

收起回答

CaNg_7 #1

请问如果往左的话依照他这个应该怎么写呢为什么right不可以控制移动只有left可以呢

2019-06-04 17:12:34
好帮手慕星星回复 CaNg_7 #2

你好，同学的意思是点击左侧按钮吧，点击左侧按钮列表就会向右走，上一页显示出来，改变index索引就可以，将index变小。因为left值存在的时候，设置right值是不生效的，所以没有效果。如果试着写一写，如果有问题，可以重新提问，将自己写的代码粘贴上去，老师们帮助你解决问题。

2019-06-04 17:49:09