一款比较实用的jQuery购物商城商品规格参数选择代码,仿天猫淘宝下单时选择商品规格、尺寸等选项的效果。
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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791