头像

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

来源:http://www.sucaihuo.com/js/3678 素材火管理员 2018-05-10 17:41浏览(680) 收藏

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

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 8 下载资源 下载积分: 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并保留原文链接:http://www.sucaihuo.com/js/3678.html
最新交易
评论7
头像

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

  • 头像 6楼
    05-18 09:00
    ai***er
    这个是要好好应用才有用的
  • 头像 5楼
    05-15 23:47
    海***空
    程序员,你不是一个人;网站开发QQ群
  • 头像 4楼
    05-13 08:52
    en***37
    不错的特效,好好学习下拉
  • 头像 3楼
    05-11 15:34
    ja***on
    不错,很好的购物界面
  • 头像 板凳
    05-11 14:35
    进***鹿
    功能的实用性非常的强哦。
  • 头像 椅子
    05-11 13:40
    舒***畅
    功能的实用性非常的强哦。
  • 头像 沙发
    05-11 09:22
    心***扬
    实用性还不错,挺好的,感谢分享……
1 2