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

第一步：

新建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"> " + "<div class="img"><img src=""+val.imgUrl+""/></div> " + "<p class="title">"+val.title+"</p> " + "<p class="publish">"+val.publish+"</p> " + "<p class="num">"+val.num+"</p> " + "<p class="price">"+val.price+"</p> " + "<p class="publish">"+val.publish+"</p> " + "<p class="desc">"+val.desc+"</p> " + "</div>" } $(".aticle").append(innT); }) } }) }) </script>