我的程序哪里出错了，提示报错
来源：5-7 首页.UI组件-UiSlider（2）
weibo_我是LUFFCIER_0
2020-06-14 20:03:26
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>城市医院预约平台</title> <link rel="stylesheet" type="text/css" href="css/layout.css"> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/ui.css"> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id= "top" class="top"> <div class="wrap"> <p class="call">011-203948764电话预约</p> <p class="welcome">欢迎来到城市服务预约平台 欢迎光临 请 <a href="#">登录</a> <a href="#">注册</a> </p> </div> </div> <div id= "header" class="header"> <div class="wrap clearfix"> <a href="#" class="logo"><img src="./img/logo.png"></a> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-select-list"> <a href="#1">科室</a> <a href="#1">疾病</a> <a href="#1">医院</a> </div> <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容"> <a href="#" class="ui-search-submit"> </a> </div> </div> </div> <div id= "nav" class="nav"> <div class="wrap"> <div class="link menu">全部科室 <div class="menu-list ui-menu"> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">内科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">内科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">内科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-department">外科</a> <a href="" class="ui-menu-item-disease">高血压</a> <a href="" class="ui-menu-item-disease">冠心病</a> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科大家 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-detail-group-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div> </div> </div> </div> <a href="#" class="link">按医院挂号</a> <a href="#" class="link">按科室挂号</a> <a href="#" class="link">按疾病挂号</a> <a href="#" class="link">最新公告</a> <a href="#" class="link right">社会知名医院</a> </div> </div> <div id= "banner" class="banner"> <div class="banner-slider ui-slider"> <div class="ui-slider-wrap"> <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a> <a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a> <a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a> </div> <div class="ui-slider-arrow"> <a href="#l" class="item left"> </a> <a href="#r" class="item right"> </a> </div> <div class="ui-slider-process"> <a href="" class="item item_focus"> </a> <a href="" class="item"> </a> <a href="" class="item"> </a> </div> </div> <div class="banner-search"> <div class="caption"> <span class="text">快速预约</span> </div> <div class="form"> <div class="line"><select name="area"><option>医院地区</option></select></div> <div class="line"><select name="level"><option>医院等级</option></select></div> <div class="line"><select name="name"><option>医院名称</option></select></div> <div class="line"><select name="department"><option>医院科室</option></select></div> </div> <div class="submit"> <input class="button" type="button" value="快速查询"> </div> </div> <div class="banner-help"> <div class="caption"> <span class="text">帮助中心</span> </div> <div class="list"> <a href="#" class="link">账号指南</a> <a href="#" class="link">预约指南</a> <a href="#" class="link">账号找回</a> <a href="#" class="link">常见问题</a> </div> </div> </div> <div id= "content" class="content"> <div class="wrap clearfix"> <div class="content-tab"> <div class="caption"> <a href="" class="item item_focus">医院</a> <a href="" class="item">科室</a> </div> <div class="block"> <div class="item"> <div class="block-caption"> <a href="#" class="block-caption-item block-caption-item_focus">全部</a> <a href="#" class="block-caption-item">东城区</a> <a href="#" class="block-caption-item">西城区</a> <a href="#" class="block-caption-item">朝阳区</a> <a href="#" class="block-caption-item">海淀区</a> <a href="#" class="block-caption-item">禅城区</a> </div> <div class="block-content"> <div class="block-wrap"> <div class="block-list clearfix"> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-name">【三级甲等】</span></div> <div class="item-phone"> 电话：东院咨询台:010-69155564.. </div> <div class="item-address"> 佛山市禅城区华宝北路35号 </div> </div> </div> <div class="block-text-list clearfix"> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> <a href="#9" class="item">首都儿科医院<span>【三级甲等】</span></a> </div> <a href="#" class="block-more">更多医院</a> </div> <div class="block-wrap" style="display: none;"> 其他城区</div> </div> </div> <div class="item" style="display: none;">科室内容</div> </div> </div> <div class="content-news"> <div class="caption">最新公告 <a href="#" class="more">更多</a></div> <div class="list"> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> </div> </div> <div class="content-close"> <div class="caption">停诊公告 <a href="#" class="more">更多</a></div> <div class="list"> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> <a href="#" class="link">社会保障平台升级通知</a> </div> </div> </div> </div> <div id= "footer" class="footer"> </div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
.ui-search{
background: url(../img/ui-search.jpg) center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-selected{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left: 0;
top: 0;
text-indent: 14px;
}
.ui-search-select-list{
width: 67px;
line-height: 24px;
position: absolute;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2)
left:2px;
top: 36px;
z-index: 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: 208px;
height: 26px;
position: absolute;
left: 71px;
top:5px;
line-height: 26px;
}
.ui-search-submit{
display: block;
position: absolute;
right:0px;
top:1px;
line-height: 26px;
width: 40px;
height: 36px;
}
.ui-menu{}
.ui-menu-item{
height: 22px;
line-height: 22px;
padding:8px 5px 9px 6px;
margin-left: 0px;
}
.ui-menu-item-detail{
display: none;
}
.ui-menu-item:hover{
background-color: #fff;
}
.ui-menu-item-department{
float: left;
height: 22px;
line-height: 22px;
position: relative;
padding-left: 20px;
font-size: 14px;
color: #fff;
}
.ui-menu-item-department:before{
content: ' ';
display: block;
width: 22px;
height: 22px;
position: absolute;
left: 0;
top:1px;
background: url('../img/icon-menu.jpg') -22px 0 no-repeat;
}
.ui-menu-item-disease{
float:right;
padding-left: 5px;
font-size: 12px;
color: #d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department{
color: #333;
}
.ui-menu-item:hover .ui-menu-item-department:before{
background-position: 0 0;
}
.ui-menu-item:hover .ui-menu-item-disease{
color: #868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
display: block;
}
.ui-menu-item-detail{
position: absolute;
width:500px;
height: 392px;
padding: 20px 10px 10px 29px;
background: #fff url(../img/bg-menu.jpg) center no-repeat;
top: 0;
left: 190px;
box-shadow: 5px 5px 2px rgba(0,0,0,.1)
}
.ui-menu-item-detail-group{
padding-bottom: 30px;
text-align: left;
}
.ui-menu-item-detail-group-caption{
width: 100%;
height: 34px;
line-height: 34px;
color: #666;
font-size: 16px;
font-weight: bold;
}
.ui-menu-item-detail-group-list{
line-height: 23px;
}
.ui-menu-item-detail-group-list a{
display: inline-block;
color: #868686;
margin-right: 12px;
font-size: 12px;
padding-bottom: 5px;
}
.ui-menu-item-detail-group-list a:after{
content: '|';
color: #ddd;
padding-left: 12px;
}
.ui-menu-item:nth-child(2) .ui-menu-item-department:before{
background-position-y:-22px;
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
background-position-y:-44px;
}
.ui-menu-item:nth-child(4) .ui-menu-item-department:before{
background-position-y:-66px;
}
.ui-backTop{
display: none;
position:fixed;
right:2px;
bottom:2px;
z-index:9;
width: 40px;
height:40px;
color:#fff;
background:rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
background:rgba(102,102,102,.9);
}
.ui-backTop:hover:after{
content:'回到顶部';
display:block;
line-height:20px;
text-align:center;
}
.ui-slider{
width: 544px;
height: 414px;
position: relative;
overflow: hidden;
}
.ui-slider-wrap{
width:99999px;
height: 414px;
position: absolute;
left: 0;
right: 0;
transition: all .5s;
}
.ui-slider-wrap .item{
display: block;
float: left;
width: 544px;
height: 414px;
}
.ui-slider-arrow{
width: 544px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.ui-slider-arrow .item{
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
background:url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
left: 0;
}
.ui-slider-arrow .right{
right: 0;
background-position: -40px 0;
}
.ui-slider-process{
width: 544px;
height: 12px;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
}
.ui-slider-process .item{
display: inline-block;
width: 16px;
height: 16px;
background: url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
background-position: -23px 0;
}$.fn.UiSearch=function(){
var ui = $(this);
$('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
return false;
});
$('.ui-search-select-list a',ui).on('click',function(){
$('.ui-search-selected').text( $(this).text() );
$('.ui-search-select-list').hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-select-list').hide();
})
}
$.fn.UiTab=function(header,content,focus_pre){
var ui = $(this);
var tabs = $(header,ui);
var cons = $(content,ui);
var focus_pre = focus_pre || '';
tabs.on('click',function(){
var index=$(this).index();
tabs.removeClass(focus_pre+'item_focus').eq(index).addClass(focus_pre+'item_focus');
cons.hide().eq(index).show();
return false;
})
}
$.fn.UiBackTop = function(){
var ui = $(this);
var el = $('<a class="ui-backTop" href="#0"></a>');
ui.append(el);
var windowHeight = $(window).height();
$(window).on('scroll',function(){
var top=$('body').scrollTop();
if(top > windowHeight){
el.show();
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrollTop(0);
});
}
$.fn.UiSlider = function(){
var ui = $(this);
var items = $('.ui-slider-wrap .item',ui);
var btn_prev = $('.ui-slider-arrow .left',ui);
var btn_next = $('.ui-slider-arrow .right',ui);
var tips = $('.ui-slide-process .item',ui);
var current = 0;
var size = items.size();
var width = items.eq(0).width();
wrap.on('move_prev',function(){
})
.on('move_next',function(){
})
.on('move_to',function(evt,index){
wrap.css('left',index*width*-1)
});
btn_prev.on('click',function(){
wrap.triggerHandler('move_prev');
});
btn_next.on('click',function(){
wrap.triggerHandler('move_next');
});
tips.on('click',function(){
var index=$(this).index();
wrap.triggerHandler('move_to',index);
});
}
$(function(){
$('.ui-search').UiSearch();
$('.content-tab').UiTab('.caption > .item','.block > .item');
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap','block-caption-');
$('body').UiBackTop();
$('.ui-slider').UiSlider();
});
写回答
4回答
-
好帮手慕夭夭
2020-06-16
同学你好，是不是使用的jQuery文件版本比较高？因为课程源码中使用的是1.7.1，而在1.8之后，size方法就被废弃了。如果想要使用size方法，就使用课程源码中的jQuery文件。如果想要使用自己现在的jQuery文件，建议把size方法改为length属性。
祝学习愉快~
0h020-06-16 -
好帮手慕夭夭
2020-06-16
同学你好，老师这边测试，修改之后就没有报错了。同学是进行了什么操作之后报错的吗？请详细描述一下，以便老师定位问题。
祝学习愉快~
0h020-06-16 -
weibo_我是LUFFCIER_0
提问者
2020-06-15
0 -
好帮手慕夭夭
2020-06-15
同学你好，代码出现报错提示，可以根据提示去进行排查。如下:
报错的意思是wrap未定义，也就说明了js代码中使用的wrap变量没有定义，那么就在代码中看一下，或者点击后面的代码报错位置，会定位到错误，发现真的没有定义过这个变量：
此时如果不知道wrap是什么，就回顾一下课程。看看课程中是如何定义的，如下：
以上老师分享了自己排查问题修改问题的思路，同学要认真学习一下。以后遇到问题，先尝试自己排查一下，这对你帮助很大。在工作中也是至关重要的哦，加油！
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-06-15
相似问题