IE8下不能显示,说是不支持该对象或方法,chrome与firefox上正常显示。
ajax({
method : 'get',
url : 'http://study.163.com/webDev/couresByCategory.htm',
data : {
'pageNo':pageNo,
'psize':psize,
'type':type
},
success : function (data) {
console.log(data);
var _data = JSON.parse(data);
var oDiv = document.getElementById("courseList");
var list = oDiv.getElementsByTagName('li');
for(i=0;i<_data.list.length;i++){
var oLi = document.createElement("li");
oLi.setAttribute('class','courseStyle');
oLi.num=i;
oDiv.appendChild(oLi);
//创建节点·······················································
var _img = document.createElement("img");
var _name = document.createElement("p");
var _provider = document.createElement("p");
var _count = document.createElement("p");
var _price = document.createElement("p");
//赋给节点属性及内容···············································
_img.setAttribute("src", _data.list[i].middlePhotoUrl);
_img.setAttribute("class", "img");
_name.innerHTML=_data.list[i].name;
_provider.innerHTML=_data.list[i].provider;
_count.innerHTML=_data.list[i].learnerCount;
_price.innerHTML="¥"+_data.list[i].price;
//添加到li列表中···················································
oLi.appendChild(_img);
oLi.appendChild(_name);
oLi.appendChild(_provider);
oLi.appendChild(_count);
oLi.appendChild(_price);
//设置属性样式······················································
_name.setAttribute('class','courseName');
_provider.setAttribute('class','courseProvider');
_count.setAttribute('class','peopleCount');
_price.setAttribute('class','coursePrice');
}
var n = 0;
var before;
for (var i = 0; i < 5; i++) { //试用固定定位布局课程列表卡片
for (var j = 0; j < 4; j++) {
list[n].style.left=j*245+"px";
list[n].style.top=i*249+"px";
n++;
};
}
for (var i = 0,len = list.length; i < len; i++) {
addEvent(list[i],'mouseenter',mouseOver); //鼠标移入弹出课程内容卡片
addEvent(list[i],'mouseleave',function(){ //移出恢复相应状态
this.innerHTML="";
var _img = document.createElement("img");
var _name = document.createElement("p");
var _provider = document.createElement("p");
var _count = document.createElement("p");
var _price = document.createElement("p");
_img.setAttribute("src", _data.list[this.num].middlePhotoUrl);//ie8下 不能识别此属性方法
_img.setAttribute("class", "img");
_name.innerHTML=_data.list[this.num].name;//ie8下 不能识别此属性方法
_provider.innerHTML=_data.list[this.num].provider;//ie8下 不能识别此属性方法··········
_count.innerHTML=_data.list[this.num].learnerCount;
_price.innerHTML="¥"+_data.list[this.num].price;
this.appendChild(_img);
this.appendChild(_name);
this.appendChild(_provider);
this.appendChild(_count);
this.appendChild(_price);
_name.setAttribute('class','courseName');
_provider.setAttribute('class','courseProvider');
_count.setAttribute('class','peopleCount');
_price.setAttribute('class','coursePrice');
})}
function mouseOver(){ //创建弹出内容卡片函数
before = this.getElementsByTagName('p');
for (var i = 0; i < 4; i++) { //隐藏鼠标不移入时显示的内容
before[i].style.display="none";
};
var _name = document.createElement("p");
_name.innerHTML=_data.list[this.num].name;
_name.setAttribute('id','appendH');
this.appendChild(_name);
var _count = document.createElement("p");
_count.innerHTML=_data.list[this.num].learnerCount + "人在学";
_count.setAttribute('id','appendC');
this.appendChild(_count);
var _provider = document.createElement("p");
_provider.innerHTML="发布者:"+_data.list[this.num].provider;
_provider.setAttribute('id','appendA');
this.appendChild(_provider);
var _class = document.createElement("p");
_class.innerHTML="分类:"+_data.list[this.num].categoryName;
_class.setAttribute('id','appendCl');
this.appendChild(_class);
var _descript = document.createElement("p");
_descript.innerHTML=_data.list[this.num].description;
_descript.setAttribute('id','appendP');
this.appendChild(_descript);
}
},
async : true
});
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
IE8支持JSON这个对象?