526互联

html前端页面多规格商品sku选择

发布时间 2023-09-18 12:00:17作者: 橙子与柠檬

<style>
body {
　　background-color: palegoldenrod;
　　position: relative;
}
footer {
　　border: 1px solid red;
　　height: 50px;
　　position: fixed;
　　bottom: 0;
　　left: 0;
　　width: 100%;
}
.btn {
　　padding: 0 15px;
　　height: 35px;
　　line-height: 35px;
　　border: 1px solid #057778;
　　font-size: 16px;
　　-webkit-border-radius: 5px;
　　-moz-border-radius: 5px;
　　border-radius: 5px;
　　background-color: #057778;
　　color: #FFFFFF;
}
.big_btn{
　　width: 98%;
　　margin: 20px 1% 0 ;
}
.clearfix:after {content: "";display: block;visibility: hidden;height: 0;clear: both;}
.clearfix {zoom: 1;}
em,i{font-style:normal;}
/*强制换行*/
.noline {
　　word-wrap: break-word;
　　word-break: break-all;
}
/*不换行，以省略号结束*/
.line {
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
　　word-break: keep-all;
}


/*flex盒子*/

.flex_box {
　　display: -webkit-box;
　　display: -webkit-flex;
　　display: -ms-flexbox;
　　display: flex;
　　align-items: center;
　　-webkit-align-items: center;
}

.flex1 {
　　-webkit-box-flex: 1;
　　-webkit-flex: 1;
　　-ms-flex: 1;
　　flex: 1;
}
/*------------------------------------*/
.sku_box{
　　background-color: #FFFFFF;
　　width: 100%;
　　position: fixed;
　　bottom: 0;
　　left: 0;
　　padding: 10px 15px 15px 15px;
　　font-size: 16px;
　　z-index: 100;
　　/*display: none*/
}
.sku_close{
　　position: absolute;
　　right: 10px;
　　top: 10px;
　　width: 30px;
　　height: 30px;
　　font-size: 32px;
　　color: #CCCCCC;
}
.sku_hd{
　　border-bottom: 1px solid #ddd;
　　padding: 10px 0;
　　font-size: 14px;
　　color: #898989;
}
.img_box{
　　width: 80px;
　　height: 80px;
　　margin-right: 10px;
}
.img_box img{
　　width: 100%;
　　height: 100%;
}
.sku_hd li{
　　line-height: 1.8;
}
.sku_hd li span{
　　margin-right: 10px;
}
.sku_hd li label{
　　margin-right: 10px;
}
.sku_bd label,.sku_ft label{
　　font-size: 14px;
　　color: #898989;
　　line-height: 30px;
}
.sku_item{
　　border-bottom: 1px solid #ddd;
　　padding: 10px 0;
}
.sku_list li{
　　height: 35px;
　　line-height: 35px;
　　color: #333333;
　　background-color: #EaEaEa;
　　font-size: 16px;
　　display: inline-block;
　　padding: 0 15px;
　　margin-top: 10px;
　　margin-right: 10px;
　　-webkit-border-radius: 5px;
　　-moz-border-radius: 5px;
　　border-radius: 5px;
　　font-size: 14px;
}
body .active{
　　background-color: #057778;
　　color: #FFFFFF;
}
body .sku_none{
　　color: #ccc;
}
.sku_ft{
　　padding: 10px 0;
}
.count{
　　float: right;
}
.count li{
　　float: right;
　　text-align: center;
}
.minus,.plus{
　　width: 20px;
　　border: 1px solid #000;
　　color: #000000;
　　-webkit-border-radius: 3px;
　　-moz-border-radius: 3px;
　　border-radius: 3px;
　　height: 20px ;
　　margin-top: 5px;
　　font-size: 20px;
　　line-height: 18px;
}
/*减号*/
.minus_not,.plus_not{
　　border: 1px solid #CCCCCC;
　　color: #CCCCCC;
}

.count li:nth-of-type(2){
　　width: 60px;
　　padding: 0 5px;
　　line-height: 30px;
}
</style>
　　<body>
　　　　<div class="sku_box">
            <div class="sku_close">×</div>
            <div class="sku_hd flex_box">
                <div class="img_box">
                    <img src="" alt="这是商品图片"/>
                </div>
                <ul class="flex1">
                    <li style="color: #057778;">￥<em id="proPrice">113</em></li>
                    <li>
                        <label>库存:</label>
                        
                        <span id="proStock">7</span></li>
                    <li>
                        <label>规格:</label>
                        
                        <span id="sku_select">
                        <!--<span>超纤革白红</span><span>36</span>-->
                        </span>
                    </li>
                </ul>
            </div>
            <div class="sku_bd">
                <!--<div class="sku_item">
                    <label>颜色</label>
                    <ul class="sku_list" id="sku_list1">
                        <li class="active">超纤革白红</li>
                        <li>网布白红</li>
                        <li>超纤革鸳鸯色</li>
                        <li>超纤革白红</li>
                        <li>网布白红</li>
                    </ul>
                </div>-->
            </div>
            <div class="sku_ft ">
                <div class="clearfix">
                    <label>数量</label>
                    <ul class="count clearfix">
                        <!--加号-->
                        <li class="plus" id="plus">+</li>
                        <li id="shop_num">1</li>
                        <!--减号-->
                        <li class="minus minus_not" id="minus">-</li>
                    </ul>
                </div>

                <button type="button" class="btn big_btn" id="inputShopCart">加入购物车</button>
            </div>

        </div>

        <footer>
            <button type="button" class="btn" id="btn1">加入购物车</button>
        </footer>
　　</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

var skuList = [{
SkuId: 51,
SkuName: "重量",
ValueList: [
{ ValueId: 110, ValueName: "15g" },
{ ValueId: 109, ValueName: "25g" },
]
},
{
SkuId: 10243628,
SkuName: "大小",
ValueList: [
{ ValueId: 10243731, ValueName: "x" },
{ ValueId: 10243732, ValueName: "m" },
{ ValueId: 10243733, ValueName: "l" },
]
},
{
SkuId: 1001,
SkuName: "颜色",
ValueList: [
{ ValueId: 100101, ValueName: "黄色" },
{ ValueId: 100102, ValueName: "绿色" },
{ ValueId: 100103, ValueName: "蓝色" },
]
}
];
var skuSelectList = [
{ Sku: "61_110_10243731_100101", Price: 1212.00, "Stock": 12 },
{ Sku: "61_110_10243732_100102", Price: 21.00, "Stock": 9 },
{ Sku: "61_110_10243733_100103", Price: 121.00, "Stock": 1 },
{ Sku: "61_109_10243731_100101", Price: 212.00, "Stock": 5 },
{ Sku: "61_109_10243732_100102", Price: 1.00, "Stock": 8 },
{ Sku: "61_109_10243733_100103", Price: 12.00, "Stock": 7 }
];
//商品ID
var pid = 61;
$(function() {


skuInit();

$("#btn1").on("click", function() {
$(".sku_box").show();
})
$(".sku_close").on("click",function(){
$(".sku_box").hide()
})
priceAndStock(0)
$(".sku_list").on("click", "li", function() {
if($(this).hasClass('sku_none')) {
return; //被锁定了
}
$(this).toggleClass("active");
if($(this).hasClass('active')) {
$(this).siblings("li").removeClass("active");
}

//将选择的选项的valueID组成一个新的数组
var select_ids = _getSelAttrId();
//获取选择了规格的父元素，这是一个集合
var $_sel_goods_attr = $('li.active').parents('.sku_list');
// step 1
var all_ids = filterAttrs(select_ids);
//获取未选择的
var $other_notsel_attr = $('.sku_list').not($_sel_goods_attr);
// //设置为选择属性中的不可选节点
$other_notsel_attr.each(function() {
set_block($(this), all_ids);

});
//设置已选节点的同级节点是否可选
$_sel_goods_attr.each(function() {
update_2($(this));
});
showSelectSku();

if($(".sku_item").length == $("#sku_select .shop_sku").length) {
var selectSku = getSelectSku();
priceAndStock(selectSku)

}else{
priceAndStock(0)
}
checkShopNum()

})

//减号
var num = 1
$("#minus").on("click", function() {
num--
$("#shop_num").text(num--)
checkShopNum()

})
//加号
$("#plus").on("click", function() {
num++
$("#shop_num").text(num);
checkShopNum()

})
//加入购物车
$("#inputShopCart").on("click", function() {
if($(".sku_item").length != $("#sku_select .shop_sku").length) {
alert("请选择商品规格")
return false;
}
//skuID
var getSelectSkus = getSelectSku();
var num = parseInt($("#shop_num").text());

alert("你选择的skuId为："+getSelectSkus +"，数量为："+num)

})

})
//获取最后选择的规格
function getSelectSku(){
var result;
result = pid;
$("#sku_select .shop_sku").each(function(k, v) {
result += "_" + $(v).attr("valueid");
})
return result;
}

//判断库存量与价格
function priceAndStock(n) {
var maxStock = 0;
var minprice = skuSelectList[0].Price;
for(var i = 0; i < skuSelectList.length; i++) {
maxStock += skuSelectList[i].Stock;
minprice = minprice < skuSelectList[i].Price ? minprice : skuSelectList[i].Price

//console.log(n)
if(skuSelectList[i].Sku == n) {
$("#proStock").text(skuSelectList[i].Stock);
$("#proPrice").text(skuSelectList[i].Price)
return false;
} else {
$("#proStock").text(maxStock);
$("#proPrice").text(minprice);
}
}
}

function skuInit() {
if(skuList.length == 0) {
return false;
}

//生成规格选择列
$(".sku_bd").empty();
for(var i = 0; i < skuList.length; i++) {
var skuItem = $('<div class="sku_item"></div>')
var label = $('<label skuId="' + skuList[i].SkuId + '">' + skuList[i].SkuName + '</label>')
var ulList = $('<ul class="sku_list"  id="sku_list' + i + 1 + '">')

var d = skuList[i].ValueList
for(var j = 0; j < d.length; j++) {
var lis = $('<li valueId="' + d[j].ValueId + '">' + d[j].ValueName + '</li>')
ulList.append(lis);
}
skuItem.append(label);
skuItem.append(ulList);
$(".sku_bd").append(skuItem);

}

}
//获取所有包含指定节点的路线
function filterProduct(ids) {
var result = [];
$(skuSelectList).each(function(k, v) {
_attr = '_' + v.Sku + '_';
_all_ids_in = true;
for(k in ids) {
if(_attr.indexOf('_' + ids[k] + '_') == -1) {
_all_ids_in = false;
break;
}
}

if(_all_ids_in) {
result.push(v);
}

});
return result;
}

//获取 经过已选节点 所有线路上的全部节点
// 根据已经选择得属性值，得到余下还能选择的属性值
function filterAttrs(ids) {
var products = filterProduct(ids);
var result = [];
$(products).each(function(k, v) {
result = result.concat(v['Sku'].split('_'));

});
return result;
}

//已选择的节点数组
function _getSelAttrId() {
var list = [];
$('.sku_list li.active').each(function() {
list.push($(this).attr('valueId'));
});
return list;
}

function update_2($goods_attr) {
// 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选
var select_ids = _getSelAttrId();
var $li = $goods_attr.find('li.active');

var select_ids2 = del_array_val(select_ids, $li.attr('valueId'));

var all_ids = filterAttrs(select_ids2);

set_block($goods_attr, all_ids);
}

function set_block($goods_attr, all_ids) {

//根据 $goods_attr下的所有节点是否在可选节点中（all_ids） 来设置可选状态
$goods_attr.find('li').each(function(k2, li2) {

if($.inArray($(li2).attr('valueId'), all_ids) == -1) {
$(li2).addClass('sku_none');
} else {
$(li2).removeClass('sku_none');
}

});

}

function del_array_val(arr, val) {
//去除 数组 arr中的 val ，返回一个新数组
var a = [];
for(k in arr) {
if(arr[k] != val) {
a.push(arr[k]);
}
}
return a;
}
//生成显示的规格数
function showSelectSku() {
$("#sku_select").empty();
$(".sku_list").each(function(i, item) {
var m = $(item).find(".active")
var sp = $('<span></span>');
sp.attr("valueId", m.attr("valueId"))
sp.text(m.text())
if(m.text().length != 0) {
sp.addClass("shop_sku")
}
$("#sku_select").append(sp)
})
}
//判断选择库存量的值
function checkShopNum() {
//判断选择数量是否大于一
if(parseInt($("#shop_num").text()) <= 1) {
$("#shop_num").text("1")
$("#minus").addClass("minus_not")
} else {
$("#minus").removeClass("minus_not")
}
//判断选择数量是否大于库存量
if(parseInt($("#shop_num").text()) >= parseInt($("#proStock").text())) {
$("#shop_num").text($("#proStock").text());
$("#plus").addClass("plus_not");
} else {
$("#plus").removeClass("plus_not");
}
}
</script>

　

原文地址：https://www.cnblogs.com/qqing/p/7458625.html

演示地址：http://jsrun.net/NKiKp