javascript获取当前<ul>中点击的<li> 的值 来解决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;				  
		}
	}
}

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值