jQuery购物商城商品规格参数选择代码【原创

来源:https://www.sucaihuo.com/js/3678.html 2018-05-10 17:41浏览(2494) 收藏

一款比较实用的jQuery购物商城商品规格参数选择代码,仿天猫淘宝下单时选择商品规格、尺寸等选项的效果。
jQuery购物商城商品规格参数选择代码
分类:表单代码 > 筛选 难易:中级
查看演示 下载资源 下载积分: 30 积分

js代码

<script type="text/javascript">
$(function(){
	$("	.btn-allocate.btn-normal").click(function(){
		if ($(this).hasClass("active")){
			$(this).removeClass("active")		
		}	
		else{
			$(this).addClass("active")
		}		
	})
	//规格,多选
	$("#spec button").each(function(){
		$(this).click(function(){
			if($("#show-spec button").hasClass("show-spec"+$(this).index())){		
			$("#show-spec .show-spec"+$(this).index()).remove()
			}else{
				$("#show-spec").append("<button  class='btn-allocate btn-tick show-spec"+$(this).index()+"'>"+$(this).text()+"</button>")
			}
		})	
	})
	$("#hotpin button").each(function(){
		$(this).click(function(){
			if($("#show-spec button").hasClass("show-hotpin"+$(this).index())){		
			$("#show-spec .show-hotpin"+$(this).index()).remove()
			}else{
				$("#show-spec").append("<button  class='btn-allocate btn-tick show-hotpin"+$(this).index()+"'>"+$(this).text()+"</button>")
			}
		})	
	})
	//面料,单选
	$("#fabric	.btn-allocate.btn-normal").click(function(){
			$("#fabric .btn-allocate.btn-normal").removeClass("active");
			$(this).addClass("active");
	})
	$("#fabric button").click(function(){
		$("#show-fabric span").remove();
		$("#show-fabric").append("<span>"+$(this).closest(".allocate_list").find(".name").text()+$(this).text()+"</span>")
	})	
	//配件下单建议
	$("#proposal input[type='checkbox']").click(function(){
		$("#proposal input[type='checkbox']").removeAttr("checked");
		$(this).prop("checked","checked");
	})
	$("#proposal input[type='checkbox']").click(function(){
		$("#show-proposal span").remove();
		$("#show-proposal").append("<span>"+$(this).val()+"</span>")
	})	
})
</script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3678.html
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 沙发
    10-30 18:49
    ***
    后台发布怎么能变成非固定式?
1 2