50,528
社区成员
发帖
与我相关
我的任务
分享商品排序第32行报错提示
;(function(){
var data=null;
//获取选项
var oTab=document.getElementById('tab');
var oTabs=oTab.getElementsByTagName('li');
//获取页面展示数据
var goodsList=document.getElementById('goodsList');
var goodsListLi=goodsList.getElementsByTagName('li');
//ajax请求数据
//1.创建一个ajax对象
var xhr=new XMLHttpRequest;
//2.从json中获取数据
xhr.open('GET','./json/product.json',false);
//3.判断是否成功获取数据
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
data=JSON.parse(xhr.responseText);//正常返回的是JSON格式的字符串,但是我们要用JSON格式的字符串,所以JSON.parse()一下
}
};
xhr.send(null);
console.log(data);//返回JSON格式的对象
//绑定数据,渲染数据
var str = "";
for (var i = 0; i < data.length; i++) {
console.log(data);
var item = data[i];
str+=`<li data-time="${item.time}" data-price="${item.price}" data-hot="${item.hot}">
<img src="${item.img}" alt="">
<p>${item.title}</p>
<p>上架时间: ${item.time}</p>
<p>价格: ${item.price}</p>
<p>热度: ${item.hot}</p>
</li>`
}
goodsList.innerHTML = str;
for(var i=0;i<oTabs.length;i++){
var tabLi=oTabs[i];
tabLi.flag=-1;
tabLi.ind=i;
//console.log(i);//索引是0 1 2
//自定义属性flag
tabLi.onclick=function(){
//console.log(i);索引已经变成3了,要在onclick外面存个索引
//console.log(this);点哪个哪个就是oTabs中的哪个li
this.flag*=-1;//点击的时候,tabLi.flag为正1,就让它按从小到大排序
//切换选项
switchTab.call(this);
// 排序
sortGoods.call(this);
}
}
// 给商品排序
function sortGoods(){
// oGoods.sort();
oGoods = Array.prototype.slice.call(goodsListLi);
var that = this;
oGoods.sort(function(a, b){
// that.index; // 0，上架时间，1价格； 2、热度
// a,b是数组的相邻两项
var aProp = null;
var bProp = null;
if(that.ind == 0){
aProp = a.getAttribute("data-time").replace(/-/g, "");
bProp = b.getAttribute("data-time").replace(/-/g, "");
}else if(that.ind == 1){
aProp = a.getAttribute("data-price");
bProp = b.getAttribute("data-price");
}else{
aProp = a.getAttribute("data-hot");
bProp = b.getAttribute("data-hot");
}
return that.flag*(aProp-bProp);
});
// 将排好序的元素渲染到页面上
var oFragment = document.createDocumentFragment();
for(var i = 0; i < oGoods.length; i++){
var item = oGoods[i];
// dom映射
oFragment.appendChild(item)
}
goodsList.appendChild(oFragment);
};
function switchTab() {
// 先要清除所有的li上的三角的样式
for (var j = 0; j < oTabs.length; j++) {
if (oTabs[j] !== this) {
oTabs[j].classList.remove("up");
oTabs[j].classList.remove("down");
oTabs[j].flag = -1;
}
}
// 然后再根据this.flag给this添加三角的样式
if (this.flag === 1) {//1
this.classList.add("up");
this.classList.remove("down");
} else {//-1
this.classList.add("down");
this.classList.remove("up");
}
};
})();
...全文
请发表友善的回复…
发表回复
咸哼酒家 2019-06-25
- 打赏
- 举报
他说的是中文字符的引号
qq_33867878 2019-06-25
- 打赏
- 举报
？
dl493094581 2019-06-25
- 打赏
- 举报
str+= 那一行的单引号用的是中午的吧
咸哼酒家 2019-06-25
- 打赏
- 举报
他说的是中文字符的引号[/quote]能否直接给个示例[/quote]
str+=`<li data-time="${item.time}" data-price="${item.price}" data-hot="${item.hot}">
<img src="${item.img}" alt="">
<p>${item.title}</p>
<p>上架时间: ${item.time}</p>
<p>价格: ${item.price}</p>
<p>热度: ${item.hot}</p>
</li>`
楼上说的是上面的红色部分，中英文号 ‘’'' 这两个不一样的
qq_33867878 2019-06-25
- 打赏
- 举报
他说的是中文字符的引号[/quote]能否直接给个示例
