jquery跳转到对应详情页的方法
|很多移动电商一般是商品列表页就进入详情页,这是我们知道怎么去写。点击跳转到对应的水票详情页,这我没学过的,其实是我只能尝试能不能写出来的。我花了一天写好了,成功跳转到对应的详情页,心里有一种成功的感觉,真的很爽吧!
思路:
先用ajax获取数据之后,再用localStorage中存储对象数组并读取的方法。
index.js文件
$(function(){
$.ajax({
url: "http://weixin.weipe360.com/water_shuidaojia/napi.php?s=/shop/goods_detail&token=99000554006372&ajax=1",
type: 'GET',
data:{
uid:window.localStorage.getItem("uid"),
goods_id:GetQueryString("goods_id")
},
dataType: 'jsonp', //here
success: function(data) {
var product_sale = data.data.goods_num;//产品销量
var img_url = window.localStorage.getItem('img_url');//轮播内容图片
$('.mui-slider-item').find('img').attr('src',img_url);
var id = data.data.id;
var goods_price_list = data.data.goods_price_list;
var goods_title = data.data.goods_title;
var goods_price_list = data.data.goods_price_list;
var goods_water_price = data.data.goods_water_price;
var goods_water_set = data.data.goods_water_set;
var goods_rebate = data.data.goods_rebate;
var goods_num = data.data.goods_num;
var goods_detail = data.data.goods_detail;
var goods_type = data.data.goods_type;
var goods_time = data.data.goods_time;
var goods_img = data.data.goods_img;
var goods_img_list = data.data.goods_img_li;
var goods_gift_id = data.data.goods_gift_id;
var goods_tickets = data.data.goods_tickets;
var goods_deposit = data.data.goods_deposit;
var goods_status = data.data.goods_status;
var goods_px = data.data.goods_px;
var goods_xl = data.data.goods_xl;
var goods_brand_name = data.data.goods_brand_name;
var goods_monthly_sales = data.data.goods_monthly_sales;
$('.goods_detail_title').attr('goods_id',id);
$("#goods_name").text(data.data.goods_name);//商品名称
$(".theGoodsPrice").text(data.data.goods_price);//商品价格
$(".goods_detail_con p").html(data.data.goods_detail);//商品介绍
//window.localStorage["goods_deposit"] = data.data.goods_deposit;//判断是否是桶装水
if (data.data.goods_deposit != 1) {
$("#anniou").css("display:none;");
};
goods_id = data.data.id;//产品id
var ShoppingCart = utils.getParam("ShoppingCart");
if(ShoppingCart != null){
var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));
var productlist = jsonstr.productlist;
//遍历购物车列表
for (var i in productlist) {
//如果有该商品
if (productlist[i].id == goods_id) {
goods_nums=productlist[i].num
}
}
}
$('.count').text(goods_nums)
$('.addition_list').show()
if(cart.getCart().totalNumber == 0){
$("#bottomCartNum").hide();
}else if (cart.getCart().totalNumber > 0) {
$("#bottomCartNum").show();
$("#bottomCartNum").addClass('mui-badge-success');
$("#bottomCartNum").addClass('mui-badge');
$("#bottomCartNum").css({'background':'#D44444','color':'#fff'});
}
n=goods_nums;
if(cart.getCart() != undefined) {
$('#bottomCartTotalPrice').html(cart.getCart().totalAmount);
$('#bottomCartNum').html(cart.getCart().totalNumber);
}
//刷新结算按钮的显示与隐藏
if(goods_nums == 0){
$(".gwc").find(".buttons").css('display','none');
} else if (goods_nums>0) {
$(".gwc").find(".buttons").css('display','block');
}
$('.goods_detail_title').on( 'click' , 'a' , function(){
var goods_name = $('.goods_detail_title').find("#goods_name").text();
var goods_id = $('.goods_detail_title').attr("goods_id");
var w_ticked_img = $('.mui-slider-item').find('img').attr('src');
var product =
{
'id': goods_id, //属性名用引号括起来,属性间由逗号隔开
'goods_name': goods_name,
'goods_title': goods_title,
'goods_price_list': goods_price_list,
'goods_water_price': goods_water_price,
'goods_water_set': goods_water_set,
'goods_rebate': goods_rebate,
'goods_num': goods_num,
'goods_detail': goods_detail,
'goods_type': goods_type,
'goods_time': goods_time,
'goods_img': goods_img,
'goods_img_list': goods_img_list,
'goods_gift_id': goods_gift_id,
'goods_tickets': goods_tickets,
'goods_deposit': goods_deposit,
'goods_status': goods_status,
'goods_px': goods_px,
'goods_xl': goods_xl,
'goods_brand_name': goods_brand_name,
'goods_monthly_sales': goods_monthly_sales
}
product = JSON.stringify(product);
localStorage.setItem("product",product);
localStorage.setItem("w_ticked_img",w_ticked_img);
window.location.href="http://localhost/water_shuidaojia/water_1/html/user/tickcts/buy_ticket.html?goods_id="+goods_id;
})
}
});
})
效果图: