老师，帮我看一下，json数据获取有问题

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li class="fl"><a href="javascript:;" class="nav-site-mobile link">手机逛慕淘</a></li>

</ul>

<li><a href="javascript:;" class="menu-item">已买到的宝贝</a></li>

</ul>

</li>

<a href="javascript:;" class="dropdown-toggle link">收藏的店铺<i class="dropdown-arrow icon"></i></a>

<li><a href="javascript:;" class="menu-item">已买到的宝贝</a></li>

</ul>

</li>

</li>

<!-- <li><a href="javascript:;" class="menu-item">已卖出的宝贝</a></li>

<li><a href="javascript:;" class="menu-item">已卖出的宝贝2</a></li> -->

</ul>

</li>

<li><a href="javascript:;" class="menu-item">消费者客服</a></li>

</ul>

</li>

</ul>

</div>

</form>

<!-- <li class="search-layer-item text-ellipsis">1</li>

</ul>

</div>

</div>

</div>

</div>

<!-- <dl class="category-details cf">

</dd>

</dl>

</dd>

</dl>

</dd>

</dl>

</dd>

</dl> -->

</div>

</li>

</div>

<!-- <dl class="category-details cf">

</dd>

</dl>

</dd>

</dl>

</dd>

</dl>

</dd>

</dl> -->

</div>

</li>

</ul>

</div>

</div>

<!-- <button class="btn-show">show</button>

</body>

</hml>

[

{

"title": "电视",

"items": [

"抢亿元红包",

"合资品牌",

"国产品牌",

"互联网品牌"

]

{

"title": "空调",

"items": [

"壁挂式空调",

"柜式空调",

"中央空调",

"空调配件"

]

{

"title": "洗衣机",

"items": [

"满千减百",

"滚筒洗衣机",

"洗烘一体机",

"波轮洗衣机",

"迷你洗衣机",

"洗衣机配件"

]

{

"title": "冰箱",

"items": [

"多门",

"对开门",

"三门",

"双门",

"冷柜/冰吧",

"酒柜",

"冰箱配件"

]

{

"title": "厨卫大电",

"items": [

"油烟机",

"燃气灶",

"烟灶套装",

"消毒柜",

"洗碗机",

"电热水器",

"燃气热水器",

"嵌入式厨电"

]

{

"title": "厨房小电",

"items": [

"小家电年货",

"电饭煲",

"微波炉",

"电烤箱",

"电磁炉",

"电压力锅",

"豆浆机",

"咖啡机",

"面包机",

"榨汁机",

"料理机",

"电饼铛",

"养生壶/煎药壶",

"酸奶机",

"煮蛋器",

"电水壶/热水瓶",

"电炖锅",

"多用途锅",

"电烧烤炉",

"电热饭盒",

"其它厨房电器"

]

{

"title": "生活电器",

"items": [

"取暖电器",

"吸尘器",

"净化器",

"扫地机器人",

"加湿器",

"挂烫机/熨斗",

"电风扇",

"冷风扇",

"插座",

"电话机",

"饮水机",

"净水器",

"除湿机",

"干衣机",

"清洁机",

"收录/音机",

"其它生活电器",

"生活电器配件"

]

{

"title": "个护健康",

"items": [

"剃须刀",

"口腔护理",

"电吹风",

"美容器",

"卷/直发器",

"理发器",

"剃/脱毛器",

"足浴盆",

"健康秤/厨房秤",

"按摩器",

"按摩椅",

"计步器/脂肪检测仪",

"其它健康电器"

]

{

"title": "家庭影音",

"items": [

"家庭影院",

"迷你音响",

"DVD",

"电视影音配件"

]

{

"title": "进口电器",

"items": [

"进口电器"

]

}

]

(function($){

// $('.dropdown').hover(function(){

// $(this).addClass('dropdown-active');

// },function(){

// $(this).removeClass('dropdown-active')

// })

$('#category').find('.dropdown').on('dropdown-show',function(e,updateLayer){

// console.log(e.type)

var $this=$(this);

var dataLoad=$this.data('load');

if(!dataLoad)return;

if(!$this.data('loaded')){

var $layer=$this.find('.dropdown-layer');

var html="";

console.log($layer)

$.getJSON(dataLoad,function(data){

setTimeout(function(){

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

html+='<dl class="category-details cf"><dt class="category-details-title fl"><a href="javascript:;">'+data[i].title+'</a></dt><dd class="category-details-item fl">'

for(var j=0;j<data[i].items.length;j++){

html+='<a href="javascript:;" class="link">'+data[i].items[j]+'</a>'

}

html+='</dd></dl>'

}

$layer.html(html)

$this.data('loaded',true)

updateLayer();

},200)

})

}

})

$('.dropdown').on('dropdown-show',function(e,updateLayer){

console.log(e.type)

var $this=$(this);

var dataLoad=$this.data('load');

if(!dataLoad)return;

if(!$this.data('loaded')){

var $layer=$this.find('.dropdown-layer');

var html="";

$.getJSON(dataLoad,function(data){

console.log(data)

setTimeout(function(){

for(var i=0;i<data.length;i++){

html+='<li><a href="'+data[i].url+'" class="menu-item">'+data[i].name+'</a>'

}

$layer.html(html)

$this.data('loaded',true)

updateLayer();

},200)

})

}

})

$('.dropdown').dropdown({

event:'hover',

// css3:true,

// js:true,

delay:500,

animation:'slideLeftRight',

active:'menu'

});

$('#category').find('.dropdown').dropdown({

css3:true,

js:true,

animation:'slideLeftRight'

})

$('.btn-show').on('click',function(){

$('.dropdown').dropdown('show')

})

$('.btn-hide').on('click',function(){

$('.dropdown').dropdown('hide')

})

// var $headerSearch=$('#header-search');

// var html='',

// maxNum=10;

// $headerSearch.on('search-getData',function(e,data,layer){

// console.log(e.type);

// console.log(data)

// html=createHeaderSearchLayer(data,maxNum);

// layer.html(html)

// $(this).find('.search-layer').html(html)

// if(html){

// $(this).search('showLayer')

// }else{

// $(this).search('hideLayer')

// }

// }).on('search-noData',function(e,layer){

// console.log(e.type)

// $(this).search('hideLayer');

// layer.html('')

// }).on('click','.search-layer-item',function(){

// $headerSearch.search('setInputVal',$(this).html)

// $headerSearch.search('submit')

// // input.val($(this).html())

// // form.submit();

// })

// $headerSearch.search({

// autocomplete:true,

// css3:false,

// js:false,

// animation:'fade'

// })

// function createHeaderSearchLayer(){

// var dataNum=data['result'].length,

// html='';

// if(dataNum===0){

// return '';

// }

// for(var i=0;i<dataNum;i++){

// if(i>=maxNum) break;

// html+='<li class="search-layer-item text-ellipsis">'+data['result'][i][0]+'</li>'

// }

// return html;

// }

})(jQuery)

/*nav-site*/

.nav-site{ /*站点导航整体设置*/

width:100%;

background-color: #f3f5f7;

}

.nav-site .container{ /*站点导航内容块整体设置*/

height: 44px;

line-height: 44px;

border-bottom: 1px solid #cdd0d4;

}

.nav-site-login{ /*站点导航“亲，请登陆”设置*/

margin-left:15px;

color:#f01414;

}

.nav-site-signup,

.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/

margin-left:10px;

}

.nav-site-category{

margin:0 10px;

}

.nav-site-service{

margin-right:15px;

}

.search{

position: relative;

border: 1px solid #cfd2d5;

}

.search-inputbox{

width: 585px;

height: 40px;

line-height: 40px;

color: #333;

padding: 0 10px;

border: none;

background-color: #fff;

}

.search-btn{

width: 73px;

height: 40px;

line-height: 40px;

background-color: #07111b;

font-size: 14px;

color: #fff;

text-align: center;

border: none;

cursor: pointer;

}

.search-layer{

display: none;

position: absolute;

top: 100%;

left: -1px;

width: 100%;

background-color: #fff;

border: 1px solid #cfd2d5;

}

.search-layer-item{

height: 24px;

line-height: 24px;

padding: 0 10px;

cursor: pointer;

}

.search-layer-item:hover{

background-color: #f3f5f7;

}

.text-hidden{

text-indent: -9999px;

overflow: hidden;

}

.text-ellipsis{

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

.header{

width: 100%;

height: 124px;

background-color: #f3f5f7;

}

.header-logo,

.header .search,

.header .cart{

margin-top: 36px;

}

.header-logo{

display: block;

width: 136px;

height: 48px;

background: red;

margin-left: 15px;

}

.header .search{

margin-left: 145px;

}

/*nav-main*/

.nav-main{

width: 100%;

height: 48px;

background-color: #07111b;

margin-bottom: 8px;

text-indent: 182px;

}

.nav-main .container{

width: 1200px;

}

.nav-main .link{

color: #fff;

font-size: 14px;

margin-left: 50px;

line-height: 48px;

}

.category{

position: relative;

width: 208px;

margin-top: -62px;

font-size: 14px;

}

.category .dropdown{

position: static;

}

.category-title{

display: block;

height: 54px;

line-height: 54px;

padding: 0 20px;

background-color: #c81414;

color: #fff;

}

.category-title .icon{

margin-right: 10px;

font-size: 16px;

}

.category-list{

height: 512px;

background-color: #f01414;

}

.category .dropdown-toggle{

height: 36px;

line-height: 36px;

padding-left: 16px;

color: #fff;

}

.category .dropdown-link{

color: #fff;

}

.category .dropdown-arrow{

position: absolute;

/*top: 12px;*/

right: 12px;

font-family: simsun;

font-weight: bold;

}

.category-active .dropdown-toggle{

background-color: #fff;

}

.category-active .dropdown-toggle,

.category-active .dropdown-link{

color: #f01414;

}

.category .dropdown-layer{

top: 54px;

left: 100%;

width: 744px;

padding: 8px 0 31px 0;

background-color: #fff;

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

min-height: 473px;

}

.category-details{

width: 744px;

margin-top: 24px;

line-height: 20px;

}

.category-details-title{

width: 84px;

padding-right: 16px;

border-right: 1px solid #d69dde1;

text-align: right;

}

.category-details-title-link{

color: #07111b;

font-weight: bold;

}

.category-details-item{

padding-left: 15px;

width: 592px;

}

.category-details-item .link{

margin-right: 16px;

display: inline-block;

}

.category .dropdown-loading{

margin: 220px auto 0;

}

/*icon*/

@font-face {

font-family: "iconfont";

src: url('../font/iconfont.eot?t=1477124206');

/* IE9*/

src: url('../font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */

url('../font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('../font/iconfont.svg?t=1477124206#iconfont') format('svg');

/* iOS 4.1- */

}

.icon {

font-family: "iconfont" !important;

font-size: 14px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

/*公共样式*/

.container{

width: 1200px;

margin: 0 auto;

}

.link{

color: #4d555d;

}

.link:hover{

color: #f01414 !important;

}

.dropdown{

position: relative;

}

.dropdown-toggle{

position: relative;

z-index: 2;

}

.dropdown-arrow{

display: inline-block;

vertical-align: middle;

}

.dropdown-layer{

display: none;

overflow: hidden;

position: absolute;

z-index: 1;

}

.dropdown-left{

left: 0;

}

.dropdown-right{

right: 0;

}

/*menu dropdown*/

.menu .dropdown-toggle{

display: block;

height: 100%;

padding: 0 16px 0 12px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.menu .dropdown-arrow{

margin-left: 8px;

vertical-align: middle;

}

.menu .dropdown-layer{

top: 43px;

background-color: #fff;

border: 1px solid #cdd0d4;

}

.menu-item{

display: block;

height: 30px;

line-height: 30px;

padding: 0 12px;

color: #4d555d;

white-space: nowrap;

}

.menu-item:hover{

background-color: #f3f5f7;

}

.menu-active .dropdown-toggle{

background-color: #fff;

border-color: #cdd0d4;

}

.menu-active .dropdown-arrow{

}

.menu-active .dropdown-layer{

display: block;

}

.menu-active .dropdown-arrow{

transform: rotate(180deg);

}

.transition{

-o-transition: all .5s;

-ms-transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

transition: all .5s;

}

.fadeout{

visibility: hidden !important;

opacity: 0 !important;

}

.slideUpDownCollapse{

height: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

}

.slideLeftRightCollapse{

width: 0 !important;

padding-left: 0 !important;

padding-right: 0 !important;

}

因为跟着视频优化代码的时候，老是报$headerSearch这个错误，所以就没有用这个，还是原来的，但是还是有问题，数据获取控制台可以显示出来，但在界面上一直是undefined

慕粉1905369247 2020-04-09

源自：实战：中心focus区域组件化 1-5 按需加载商品详情

收起

5回答

好帮手慕夭夭回答被采纳获得+3积分 2020-04-09 19:15:33

同学你好，因为你的代码中设置了白色背景，但是没有设置字体颜色。如下添加就行：

因为项目比较大的时候，老师们不知道同学是还没有完成这一块，还是不会做。像这里老师以为你自己还没有写完样式，所以建议同学如果不懂的，下次可以一起说一下，这样老师一次性为你解决，也提升了同学解决问题的效率哦。

祝学习愉快 ~

收起回答

好帮手慕夭夭 2020-04-09 17:43:28

同学你好，代码的问题如下：

1.单词拼错如下修改

2.dropdown有两个事件，点击商品分类时，会触发导航上dropdown的事件。如下修改：

祝学习愉快 ~

收起回答

提问者慕粉1905369247 #1

好的，改好了，麻烦老师再看下，我的按钮样式为什么hover上去是白色的，字体没有变红

2020-04-09 17:48:32

提问者慕粉1905369247 2020-04-09 16:26:30

收起回答

好帮手慕夭夭 2020-04-09 16:17:17

同学你好，老师这边测试你的代码，这一块改的就是商品分类的（如下图）。可能粘贴同学的部分代码进行测试有偏差，请同学查看私信，以便老师进一步为你解决。

祝学习愉快 ~

收起回答

提问者慕粉1905369247 #1

$('#category').find('.dropdown').on('dropdown-show',function(e,updateLayer){ // console.log(e.type) var $this=$(this); var dataLoad=$this.data('load'); if(!dataLoad)return; if(!$this.data('loaded')){ var $layer=$this.find('.dropdown-layer'); var html=""; console.log($layer) $.getJSON(dataLoad,function(data){ setTimeout(function(){ for(var i=0;i<data.length;i++){ // html+='<dl class="category-details cf"><dt class="category-details-title fl"><a href="javascript:;">'+data[i].title+'</a></dt><dd class="category-details-item fl">' // for(var j=0;j<data[i].items.length;j++){ // html+='<a href="javascript:;" class="link">'+data[i].items[j]+'</a>' // } // html+='</dd></dl>' html+='<li>'+data[i].title+'<ul>'; var item=data[i].items; for(var j=0;j<item.lengt;j++){ html+='<li>'+item[j]+'</li>' } html+='</ul></li>' } $layer.html(html) $this.data('loaded',true) updateLayer(); },200) }) } }) 我改了还是undefined

2020-04-09 16:24:12

好帮手慕夭夭 2020-04-09 15:03:00

同学你好，是因为绑定的数据中，属性名与数据本身的属性名并不一样。所以获取了不存在的属性就是undefined。

如下修改：

注意，items是一个数组，所以也需要循环，最终的数据结构如下：

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

收起回答

提问者慕粉1905369247 #1

for(var i=0;i<1;i++){ html+='<dl class="category-details cf"><dt class="category-details-title fl"><a href="javascript:;">'+data[i].title+'</a></dt><dd class="category-details-item fl">' for(var j=0;j<data[i].items.length;j++){ html+='<a href="javascript:;" class="link">'+data[i].items[j]+'</a>' } html+='</dd></dl>' } $layer.html(html) $this.data('loaded',true) updateLayer(); 没明白，我的items是有获取的，你改的是我卖家中心的，我卖家中心是可以显示的，是商品分类那里不能显示

2020-04-09 15:09:19