本人小白,下面项目中有很多自己踩过的坑,话不多说,上个公司项目的代码,里面有很多可以用到的,希望帮助到你,不喜勿喷......小白就是小白..........
总结:如果标签属性是赢定义好的,就按照正常html来写,如果是根据data来动态获取定义的,则需要""'看似三个引号来包裹,中间的text或者innerhtml也是这个道理。
// $(document).ready(function () {
// $.ajax({
// url: "http://localhost:9090/student",
// type: "GET",
// data:'',
// dataType: "jsonp", //指定服务器返回的数据类型
// jsonp:'callback',//指定服务器返回的回调函数
// success: function (data) {
// var result = JSON.stringify(data); //json对象转成字符串
// $("#text").val(result);
// },
// timeout:3000
// });
// });
$(document).ready(function(){
function getInfo(url,callback){
$.ajax({
type:"post",
url:url,
//dataType:'jsonp',
crossDomain: true,
contentType: "application/json",
xhrFields: {
withCredentials: true
},
beforeSend: function() {
$(".header_your_first_ul").children("li").hide()
},
success:callback,
complete: function() {
$(".header_your_first_ul").children("li").show()
},
error:function(error){
console.log(error);
}
});
}
getInfo("https://test.kyoye.com/customer/Exchange/CustomerInfo",function(data){
// console.log(data.customer.fullname)
console.log("CustomerInfo",data);
var persontrue=data.customer.fullname
if(data.customer.fullname==undefined){
$(".header_your_first_ul_div_hidden").remove()
$(".header_your_first_ul_h1two_div_hidden").remove()
}else{
// delet some divs
$(".header_your_first_ul_div").remove()
$(".header_your_first_ul_h1two_div").remove()
// pc person
$(".header_your_first_ul_h1two span").text(data.customer.profiles[0].nickname).css("text-transform","uppercase").append('<b class="iconfont"></b>');
//$(".header_your_first_ul_ul_sec_hidden").children("li:nth-child(2)").children("a").text(data.customer.fullname).attr("href",data.customer.profiles[1].url)
$(".header_your_first_ul_ul_sec_hidden").children("li:last-child").children("span").text(data.customer.profiles[0].nickname)
for (var ci = 0; ci<data.customer.profiles.length;ci++) {
if (data.customer.profiles[ci].iscurrent) {
$(".header_your_first_ul_ul_sec").children("li:last-child").remove()
$(".header_your_first_ul_h1two").children("span").text(data.customer.profiles[ci].nickname).append('<b class="iconfont"></b>');
$(".header_your_first_ul_ul_sec_hidden").append("<li><a href='"+data.customer.profiles[ci].url+"'>"+data.customer.profiles[ci].nickname+"</a></li>").children("li:last-child").prepend("<i class='iconfont iconfont_yellow'></i>")
}else{
$(".header_your_first_ul_ul_sec_hidden").children("li:first-child").after("<li><a href='"+data.customer.profiles[ci].url+"'>"+data.customer.profiles[ci].nickname+"</a></li>")
}
}
};
// phone person
for (var pci = 0; pci<data.customer.profiles.length;pci++) {
if(data.customer.profiles[pci].iscurrent) {
$(".header_div_m_left_show_shop_message_right_div_login").children("h2").find("a").empty()
$(".header_div_m_left_show_shop_message_right_div_login").children("h2").find("a").text(data.customer.profiles[pci].nickname).attr("href",data.customer.profiles[pci].url)
}else{
$(".header_div_m_left_show_shop_message_right_ul_login").children("li:nth-child(3)").after("<li><a href='"+data.customer.profiles[pci].url+"'>"+data.customer.profiles[pci].nickname+"</a></li>")
}
};
$(".header_your_first_ul").children("li:first-child").bind(
{mouseenter:function(){$(this).children("h1").children("span").css({"background-color":"#f90","border-bottom":"1px solid #ffba61"});$(this).find(".header_your_first_ul_div_hidden").toggle();$(".header_shop_car_message_hidden").hide(300);$(".iconfont_div").hide(200)},
mouseleave:function(){$(this).children("h1").children("span").css({"background-color":"","border-bottom":"0px"});$(this).find(".header_your_first_ul_div_hidden").toggle();$(".iconfont_div").hide(200)}
})
// mouse to controll cart show hide
$(".header_your_first_ul").children("li:last-child").bind(
{mouseenter:function(){$(this).children("h1").children("span").css({"background-color":"#f90","border-bottom":"1px solid #ffba61"});$(this).find(".header_your_first_ul_h1two_div_hidden").toggle();$(".header_shop_car_message_hidden").hide(300);$(".iconfont_div").hide(200)},
mouseleave:function(){$(this).children("h1").children("span").css({"background-color":"","border-bottom":"0px"});$(this).find(".header_your_first_ul_h1two_div_hidden").toggle();$(".iconfont_div").hide(200)}
})
// click search to controll cart show hide
$(".header_search_ul").find("i").click(function(){
$(".header_shop_car_message_hidden").hide(200)
})
getInfo("https://test.kyoye.com/customer/Exchange/cartinfo",function(data){
// pc mincart ajax message
console.log("cartInfo",data);
$(".header_shop_message").text(data.cart.summary_count)
$(".header_shop_car_message_hidden_div_first").children("a").text("("+data.cart.summary_count+"items):")
// this is a pulic price called $datastr in pc and phone
$datastr=data.cart.subtotal;
$datatotal=(($datastr.replace(/[^0-9]+/g, ''))/100);
$(".header_shop_car_message_hidden_div_first").children("h2").text("$"+$datatotal)
var pcstr="";
for (var i = 0; i < data.cart.items.length; i++) {
pcstr+="<div class='header_shop_car_message_hidden_div_details'>"
+"<div class='header_shop_car_message_hidden_div_details_img'>"
+"<a href='"+data.cart.items[i].configure_url+"'>"
+"<img src='"+data.cart.items[i].product_image.src+"'/>"
+"</a>"
+"</div>"
+"<div class='header_shop_car_message_hidden_div_details_message'>"
+"<div class='header_shop_car_message_hidden_div_details_message_left'>"
+"<a href='"+data.cart.items[i].product_url+"'>"+data.cart.items[i].product_name+"</a>"
+"<p>$"+data.cart.items[i].product_price_value+"</p>"
+"<span>Qty :"+data.cart.items[i].qty+"</span>"
+"</div>"
+"<div class='header_shop_car_message_hidden_div_details_message_rights'>"
+"<h1>see</h1>"
+"<h2>details ></h2>"
+"<div>"
+"<h3>color</h3>"
+"<h4>"+data.cart.items[i].options[0].value+"</h4>"
+"</div>"
+"</div>"
+"</div>"
+"</div>";
};
$(".header_shop_car_message_hidden_div").append(pcstr);
// phone mincart ajax message
$(".header_div_m_left_show_shop_message_detailes_login").children("a").text("("+data.cart.summary_count+"items)")
$(".header_div_m_left_show_shop_message_detailes_login").children("h2").text("$"+$datatotal)
$(".header_div_m_shop_message").text(data.cart.summary_count)
var phonestr="";
for (var i = 0; i < data.cart.items.length; i++) {
phonestr+="<div class='header_div_m_left_show_shop_message_right_bottom_login'>"
+"<a href='"+data.cart.items[i].product_url+"'>"
+"<img src='"+data.cart.items[i].product_image.src+"'/>"
+"</a>"
+"<div class='header_div_m_left_show_shop_message_right_bottom_login_message'>"
+"<h1>"+data.cart.items[i].product_name+"</h1>"
+"<h2>$"+data.cart.items[i].product_price_value+"</h2>"
+"<h3>details ></h3>"
+"<div>"
+"<h4>color</h4>"
+"<h5>"+data.cart.items[i].options[0].value+"</h5>"
+"</div>"
+"</div>"
+"</div>";
};
$(".formessage").append(phonestr);
// pc and phone jq transform
if (persontrue) {
if(data.cart.summary_count==null || data.cart.summary_count==""){
$(".header_your_first_ul_h1two_div").remove()
$(".header_your_first_ul_div").remove()
$(".header_div_m_left_show_shop").remove()
$(".header_shop_car_message_hidden").remove()
}else{
$(".header_shop_car_message").remove()
$(".header_div_m_left_show_shop").remove()
}
}else{
if(data.cart.summary_count==null || data.cart.summary_count==""){
$(".header_div_m_left_show_shop_login").remove()
$(".header_shop_car_message_hidden").remove()
$(".header_your_first_ul_h1two_div_hidden").remove()
$(".header_your_first_ul_div_hidden").remove()
}else{
$(".header_your_first_ul_div_hidden").remove()
$(".header_your_first_ul_h1two_div_hidden").remove()
$(".header_shop_car_message").remove()
}
}
// pc
// mincart click to controll search and youself and account show hide
$(".header_shop_car").children("i").click(function(){
$(".header_shop_car_message_hidden").toggle(300)
$(".header_your_first_ul_h1two_div_hidden").hide(300)
$(".header_your_first_ul_div_hidden").hide(300)
$(".iconfont_div").hide(200)
})
$(".header_shop_car_message_hidden_b").children("b").click(function(){
$(".header_shop_car_message_hidden").hide(300)
$(".iconfont_div").hide(200)
})
var divs=document.getElementsByClassName("header_shop_car_message_hidden_div_details_message_rights");
for(var ii=0;ii<divs.length;ii++){
divs[ii].childNodes[1].οnclick=function(){
$(this).next("div").toggle(200)
}
}
$(".header_div_m_shop").find("b").bind("click",function(){
$(".header_div_m_left_show_shop_login").slideToggle()
$(".header_div_m_left").find("b").fadeIn()
$(".header_div_m_left").find("i").fadeOut()
$("body").css({"overflow-x":"hidden","overflow-y":"auto"})
$(".header_div_m_left_show").fadeOut()
})
$(".header_div_m_left_show_shopheader_shop_car_close_login").find("b").bind("click",function(){
$(".header_div_m_left_show_shop_login").fadeToggle(800)
$("body").css({"overflow-x":"hidden","overflow-y":"auto"})
})
$(".header_div_m_left_show_shop_close_login").find("b").bind("click",function(){
$(".header_div_m_left_show_shop_login").fadeToggle(800)
$("body").css({"overflow-x":"hidden","overflow-y":"auto"})
})
$(".header_div_m_left").find("b").bind("click",function(){
$(".header_div_m_left_show_shop_login").fadeOut(800)
$("body").css({"overflow-x":"hidden","overflow-y":"auto"})
})
var divss=document.getElementsByClassName("header_div_m_left_show_shop_message_right_bottom_login_message");
for(var sii=0;sii<divss.length;sii++){
divss[sii].childNodes[2].οnclick=function(){
$(this).next("div").slideToggle(200)
// this.nextSibling.style.display='block'
}
}
//else end
})
});
getInfo("https://test.kyoye.com/customer/Exchange/WishList",function(data){
console.log("WishList",data);
if(data.wishlist.counter==null){
$(".header_your_first_ul_ul_first_hidden").children('li:first-child').children("a").text("save frame("+data.wishlist.items.length+")").css("text-transform","capitalize")
}else{
$(".header_your_first_ul_ul_first_hidden").children('li:first-child').children("a").text("save frame("+data.wishlist.counter+")").css("text-transform","capitalize")
}
});
})
$(document).ready(function(){
var referer=$.base64.btoa(window.location.href);
$(".header_your_first_ul_div").find("h2").children("a").attr("href","https://test.kyoye.com/customer/account/login/referer/"+referer+"/")
$(".header_div_m_left_show_shop_message_left_div_div").find("h2").children("a").attr("href","https://test.kyoye.com/customer/account/login/referer/"+referer+"/")
})