我的程序哪里出错了,提示报错

我的程序哪里出错了,提示报错

<!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">欢迎来到城市服务预约平台&nbsp;&nbsp;欢迎光临&nbsp;请&nbsp;
<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">&nbsp;</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">&nbsp;</a>
<a href="#r" class="item right">&nbsp;</a>
</div>
<div class="ui-slider-process">
<a href="" class="item item_focus">&nbsp;</a>
<a href="" class="item">&nbsp;</a>
<a href="" class="item">&nbsp;</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();

});






正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕夭夭 2020-06-16 14:26:40

同学你好,是不是使用的jQuery文件版本比较高?因为课程源码中使用的是1.7.1,而在1.8之后,size方法就被废弃了。如果想要使用size方法,就使用课程源码中的jQuery文件。如果想要使用自己现在的jQuery文件,建议把size方法改为length属性。

http://img1.sycdn.imooc.com//climg/5ee8661a09b7d89e03640063.jpg

祝学习愉快~

  • 提问者 weibo_我是LUFFCIER_0 #1
    是的,我之前用的是3.几的版本的jQuery文件,换了之后好像可以了
    2020-06-16 21:08:14
好帮手慕夭夭 2020-06-16 09:43:06

同学你好,老师这边测试,修改之后就没有报错了。同学是进行了什么操作之后报错的吗?请详细描述一下,以便老师定位问题。

祝学习愉快~

提问者 weibo_我是LUFFCIER_0 2020-06-15 21:23:34
好帮手慕夭夭 2020-06-15 09:58:42

同学你好,代码出现报错提示,可以根据提示去进行排查。如下:

http://img1.sycdn.imooc.com//climg/5ee6d4f5098f318a17410174.jpg

报错的意思是wrap未定义,也就说明了js代码中使用的wrap变量没有定义,那么就在代码中看一下,或者点击后面的代码报错位置,会定位到错误,发现真的没有定义过这个变量:

http://img1.sycdn.imooc.com//climg/5ee6d5300983d0bf06650493.jpg

此时如果不知道wrap是什么,就回顾一下课程。看看课程中是如何定义的,如下:

http://img1.sycdn.imooc.com//climg/5ee6d5950902b0b704600137.jpg

以上老师分享了自己排查问题修改问题的思路,同学要认真学习一下。以后遇到问题,先尝试自己排查一下,这对你帮助很大。在工作中也是至关重要的哦,加油!

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 weibo_我是LUFFCIER_0 #1
    还有别的错误,搞不懂,老师你看我上个回答的截图
    2020-06-15 21:22:05
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师