1. 程式人生 > >javascript獲取當前中點選的 的值 來解決MUI多規格切換

javascript獲取當前中點選的 的值 來解決MUI多規格切換

var ul = document.getElementById('parent');
var lis = ul.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
alert(this.innerHTML);
}
}

mui.plusReady(function () {
var self = plus.webview.currentWebview();
article_id=self.info_id;   
mui.post(request_url+'api/',{
	action: 'app_shop_info',
	info_id:article_id
},function(data){
	js_bianlian=data.guige_datadetails;				
	if(data.msg=="1"){	
		if(data.guige_datalist==""){
			singular_status=1;
			var makesure = document.getElementById("app-makesure");
			makesure.setAttribute("href","###");
	        makesure.setAttribute("onclick","tiaozhuang()");
		}else{
			singular_status=2;
		}
		document.getElementById("shop_name").innerText = data.title;//新增名稱
		document.getElementById("money").innerText = data.sell_price;//添加價錢
		document.getElementById("app-quantity").innerText = data.quantity;//新增庫存	
		document.getElementById("app-sell_price").innerText = data.sell_price;//添加價格
		document.getElementById("app-img-left").innerHTML = "<img src='"+request_img_url+data.img_datalist[0]+"'>";//新增圖app-img-left
		img_url=data.img_datalist[0];
		html="選擇 ";//新增選擇
		html_="<span class=''>規格:</span>";
		
	
		var data_array=data.guige_datalist;
		for(var i=0;i<data_array.length;i++){
			html+="<span>"+data_array[i].gz_prent_title+" </span>";
			html_+=data_array[i].gz_prent_title+" ";
		}
		html_+="<span class='iconfont icon-enter'></span>";					 
		document.getElementById("app-select").innerHTML = html;
		document.getElementById("app-select_").innerHTML = html_;	
		html=""//新增規格
		for(var i=0;i<data_array.length;i++){
			html+="<div class='guige_cell'>";
			html+="<div class='title' >";
			html+=data_array[i].gz_prent_title;
			html+="</div>";
			html+="<ul class='ul1 mui-segmented-control clearfix' >";						 
			for(var j=0;j<data_array[i].guige_childlist.length;j++){
				html+="<li onclick='getMuiActive(this)'> <a href='javascript:void(0);' value='"+data_array[i].guige_childlist[j].gz_child_id+"'>"+data_array[i].guige_childlist[j].gz_child_title+"</a></li>";
			}					 
			html+="</ul>";
			html+="</div>";						 
		}
		document.getElementById("app-guige").innerHTML = html;	
		
		img_datalist_array=data.img_datalist;
		var image_html="";
		for (var i=0;i<img_datalist_array.length;i++) {
			if(img_datalist_array[i].length>0){
				image_html+="<div class='mui-slider-item'><a href='#'><img src='"+request_img_url+img_datalist_array[i]+"' /></a></div>";
			}else{
				image_html+="<div class='mui-slider-item'><a href='#'><img src='../images/banner1.jpg' /></a></div>";
			}
		}
		document.getElementById("js_img_datalist").innerHTML = image_html;//新增照片
		
		var content=data.content//新增商品詳情
		content = content.replace('src="', 'src="'+request_img_url);
		document.getElementById("shop_detail_main").innerHTML=content;
		
	}else{
		console.log(data.msgbox);
	}
},'json'
);
//設定所有的新增class名

function getMuiActive(e){
	var parentElement = e.parentNode
	for (var j=0;j<parentElement.children.length;j++){
		parentElement.children[j].children[0].classList.remove("mui-active");
	}
	e.children[0].classList.add("mui-active");
	//console.log(e.parentNode.parentNode.innerHTML);
	
	var guige = e.parentNode.parentNode
	var lengths=guige.children.length;
	
	var listlength = document.querySelectorAll("a[class='mui-active']").length;
	
	if(lengths==listlength){
		vue_js_bianlian();
	}else{
		//console.log("總長度"+lengths);
	}
	
}
//點選確認,做出相關的判斷
//  singular_status="";  是否可以立即購買,1 可以,2 不可以 
// change_status=""; 判斷跳轉頁面,1 購物車,2 訂單	
function vue_js_bianlian(){
	
	var list = document.querySelectorAll("a[class='mui-active']");
	var list_select=",";
	for(var i=0;i<list.length;i++){				
		list_select+=list[i].getAttribute("value")+",";
	}		
	for(var i=0;i<js_bianlian.length;i++){	
		if(js_bianlian[i].spec_ids==list_select){					
			document.getElementById("money").innerText = js_bianlian[i].sell_price;//添加價錢
			document.getElementById("app-quantity").innerText = js_bianlian[i].stock_quantity;//新增庫存	
			document.getElementById("app-sell_price").innerText = js_bianlian[i].sell_price;//添加價格		
			document.getElementById("app-select").innerText = js_bianlian[i].spec_text;//添加價格
		    document.getElementById("app-goods_id").setAttribute("value",js_bianlian[i].goods_id);
		    document.getElementById("app-numbox-min-max").setAttribute("data-numbox-max",Number(js_bianlian[i].stock_quantity));
		    var html_select="庫存: "+js_bianlian[i].stock_quantity+"";
		    document.getElementById("shop_guige_select").innerText = html_select;//添加價格
		}
	}
	
	
}        
//跳轉方法
function tiaozhuang(){
	//change_status  判斷跳轉頁面,1 購物車,2 訂單
	//判斷是否可以直接購買   singular_status=1 可以 2 不可以
	if(singular_status==2){
		goods_id=document.getElementById("app-goods_id").value; 
		if(goods_id=="0"){				
			mui.toast("請選擇相關引數");return false;
		}else{
			/*var div1 = document.getElementById("app-detail-car");
			var div2 = document.getElementById("app-detail-buy");
    	    div1.setAttribute("href", "javascript:void(0);");
    	    div2.setAttribute("href", "javascript:void(0);");*/
			//mui.toast("確認");
	        switch(change_status)
			{
			case 1:
		      //加入購物車
		      if(user_id=="0" || user_id==null || user_id==undefined || user_id==''){
	        	mui.toast("請先登入帳號");return false
	          }
		      joinshopcar();
		      mui.openWindow({ url: '/shoppingcar/car.html'});
			  break;
			case 2:
			  //立即購買
			  if(user_id=="0" || user_id==null || user_id==undefined || user_id==''){
	        	mui.toast("請先登入帳號");return false
	          }
			  lijigoumai()
			  break;				  
			}
		}
	}else{
		switch(change_status)
		{
		case 1:
	      //加入購物車
	      if(user_id=="0" || user_id==null || user_id==undefined || user_id==''){
	        	mui.toast("請先登入帳號");return false
	      }
	      joinshopcar();
	      mui.openWindow({ url: '/shoppingcar/car.html'});
		  break;
		case 2:
		  //立即購買
	      if(user_id=="0" || user_id==null || user_id==undefined || user_id==''){
	        	mui.toast("請先登入帳號");return false
	      }				  
		  lijigoumai()
		  break;				  
		}
	}
}