列表页点击商品跳转到对应商品的详情页

第一步：

新建dome1.html列表页

通过jq的each遍历，res.books是要遍历的数据，

each处理json数据，这个each就有更厉害了，能循环每一个属性

　　var obj = { one:1, two:2, three:3}; 　　each(obj, function(key, val) { 　　alert(key); 　　alert(val); 　　});

这里alert(key)将输出one two three

alert(val)将输出one，1，two，2，three,3

跳转通过拼接a标签的href bookId通过具体页面来写，给bookId赋值，就是json数据里面的商品id值，之后再到商品详情页接收id

"<a href='dome2.html?booksId="+val.id+"'>

<div class="warp">

</div>

<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>

<script>

$(function () {

$.ajax({

type:"get",

url:"dome1.json",

dataType:"json",

success:function (res) {

console.log(res.books);

var str = "";

$.each(res.books, function(idx,val) {

str += "<div class=\"content\">" +

"<a href='dome2.html?booksId="+val.id+"'><img src='"+val.imgUrl+"'/></a>" +

"<p class=\"p\">"+val.price+"</p>" +

"</div>"

});

$('.warp').append(str);

}

})

})

</script>

第二步：

新建dome2.html详情页

接收传过来的url参数拿到列表页中a标签里面写的bookId

//获取url中的参数

function getUrlParam(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

var r = window.location.search.substr(1).match(reg); //匹配目标参数

if (r != null) return unescape(r[2]); return null; //返回参数值

}

//接收URL中的参数booksId

var id = getUrlParam('booksId');

console.log('id:'+id);

然后在遍历中进行判断，id是否等于val.id

if(id == val.id){

}

<div class="aticle">

</div>

<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>

<script>

$(function () {

//获取url中的参数

function getUrlParam(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

var r = window.location.search.substr(1).match(reg); //匹配目标参数

if (r != null) return unescape(r[2]); return null; //返回参数值

}

//接收URL中的参数booksId

var id = getUrlParam('booksId');

console.log('id:'+id);

$.ajax({

type:"get",

url:"dome1.json",

dataType:"json",

success:function (res) {

console.log(res);

$.each(res.books,function (idx,val) {

if(id == val.id){

var innT ="<div class=\"aticle_content\">\n" +

"<div class=\"img\"><img src='"+val.imgUrl+"'/></div>\n" +

"<p class=\"title\">"+val.title+"</p>\n" +

"<p class=\"publish\">"+val.publish+"</p>\n" +

"<p class=\"num\">"+val.num+"</p>\n" +

"<p class=\"price\">"+val.price+"</p>\n" +

"<p class=\"publish\">"+val.publish+"</p>\n" +

"<p class=\"desc\">"+val.desc+"</p>\n" +

"</div>"

}

$(".aticle").append(innT);

})

}

})

})

</script>