商城网站商品sku选择的js简易实现
商城网站商品sku选择的js简易实现
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>商品SKU选择DEMO</title>
</head>
<body>
<style type="text/css">
ul,
li {
padding: 0px;
margin: 0px;
}
#panel {
width: 500px;
margin: 30px auto;
}
.goods_attr {
overflow: hidden;
}
.goods_attr .label {
font: 12px/30px '宋体';
color: #777;
width: 50px;
;
padding-right: 10px;
float: left;
display: block;
}
.goods_attr ul {
float: left;
width: 300px;
}
.goods_attr li {
color: #333;
overflow: hidden;
position: relative;
float: left;
text-align: center;
vertical-align: middle;
border: 1px solid #999;
text-indent: 0;
cursor: pointer
}
.goods_attr li.b {
border: 1px dotted #CCC;
color: #DDD;
pointer: none;
}
.goods_attr li.b img {
opacity: 0.4;
}
.goods_attr li.sel {
border: 1px solid #c80a28;
color: #333;
}
.goods_attr li.text {
margin: 5px 10px 5px 0;
height: 23px;
line-height: 23px;
text-indent: 0;
padding: 0 23px;
font-style: normal;
}
.goods_attr li.img {
margin-right: 10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}
</style>
<div id="panel">
<div>價格：<span id="mycount">0元</span></div>
<div id="panel_sku_list">
<pre></pre>
</div>
<div id="panel_sel">
</div>
</div>
<script src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
/*
属性集
下面一共有4个属性
属性item1 下面有 2个属性值 分别是 10,11
（举个常见的例子 属性尺码 下有 S M L XL 4个属性值 ）
*/
var keys = {
'attr1': ['10', '11'],
'attr2': ['20', '21', '22', '23'],
'attr3': ['30', '31', '32'],
'attr4': ['40', '41']
};
//SKU，Stock Keeping Uint(库存量单位)
var sku_list = [
{
'attrs': '10|20|30|40',
'num': 120
},
{
'attrs': '10|21|30|40',
'num': 10
},
{
'attrs': '10|22|30|40',
'num': 28
},
{
'attrs': '10|22|31|41',
'num': 220
},
{
'attrs': '10|22|32|40',
'num': 130
},
{
'attrs': '11|23|32|41',
'num': 120
},
];
/**init start */
//显示html结构
function show_attr_item() {
var html = '';
for (k in keys) {
html += '<div class="goods_attr" > <span class="label">' + k + '</span>';
html += '<ul>'
for (k2 in keys[k]) {
_attr_id = keys[k][k2];
html += '<li class="text" val="' + _attr_id + '" >';
html += '<span>' + _attr_id + '</span>';
html += '<s></s>';
html += '</li>'
}
html += '</ul>';
html += '</div>';
}
$('#panel_sel').html(html);
}
//显示数据
function show_data(sku_list) {
var str = "";
for (k in sku_list) {
str += sku_list[k]['attrs'] + "\t" + sku_list[k]['num'] + "\n";
}
$('#panel_sku_list pre').html(str);
}
show_data(sku_list);
show_attr_item()
/**init end */
//获取所有包含指定节点的路线
function filterProduct(ids) {
var result = [];
$(sku_list).each(function (k, v) {
_attr = '|' + v['attrs'] + '|';
_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);
//console.log(products);
var result = [];
$(products).each(function (k, v) {
result = result.concat(v['attrs'].split('|'));
});
return result;
}
//已选择的节点数组
function _getSelAttrId() {
var list = [];
$('.goods_attr li.sel').each(function () {
list.push($(this).attr('val'));
console.log($(this).attr('val'))
console.log(list)
if(list.length === 4) {
let mycount = document.getElementById('mycount');
mycount.innerText = '45元'
}
});
return list;
}
$('.goods_attr li').click(function () {
if ($(this).hasClass('b')) {
return; //被锁定了
}
if ($(this).hasClass('sel')) {
$(this).removeClass('sel');
} else {
$(this).siblings().removeClass('sel');
$(this).addClass('sel');
}
var select_ids = _getSelAttrId();
//已经选择了的规格
var $_sel_goods_attr = $('li.sel').parents('.goods_attr');
// step 1
var all_ids = filterAttrs(select_ids);
//获取未选择的
var $other_notsel_attr = $('.goods_attr').not($_sel_goods_attr);
//设置为选择属性中的不可选节点
$other_notsel_attr.each(function () {
set_block($(this), all_ids);
});
//step 2
//设置已选节点的同级节点是否可选
$_sel_goods_attr.each(function () {
update_2($(this));
});
});
function update_2($goods_attr) {
// 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选
var select_ids = _getSelAttrId();
var $li = $goods_attr.find('li.sel');
var select_ids2 = del_array_val(select_ids, $li.attr('val'));
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('val'), all_ids) == -1) {
$(li2).addClass('b');
} else {
$(li2).removeClass('b');
}
});
}
function del_array_val(arr, val) {
//去除 数组 arr中的 val ，返回一个新数组
var a = [];
for (k in arr) {
if (arr[k] != val) {
a.push(arr[k]);
}
}
return a;
}
</script>
</body>
</html>
源代码链接：https://blog.csdn.net/csdn924618338/article/details/51455595
我在源代码基础上加了一点点点点点点点。。。。
商城网站商品sku选择的js简易实现的更多相关文章
- 商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- jquery实现商品sku多属性选择（商品详情页）
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...
- 个人的web商城网站
项目介绍 1.作为前端的菜鸟,每每看到Github上有很多大神分享着自己的项目时,内心都是蠢蠢欲动,这次终于下定决心要给自己一段时间来完成属于自己的一份作品.2.于是在查找了大量资料,思考着技术选型, ...
- B2C电子商务系统研发——商品SKU分析和设计（二）
转:http://www.cnblogs.com/winstonyan/archive/2012/01/07/2315886.html 上文谈到5种商品SKU设计模式,本文将做些细化说明. 笔者研究过 ...
- 建设商城网站ecshop如何开启伪静态
ecshop是国内一款比较流行的商城网站建设系统,它拥有比较完善的电子商务交易流程,其使用PHP+网站建设者的喜爱. 商城网站也需要网站优化,开启伪静态是个比较好的方法. ECSHOP的伪静态 ...
- YiShop_商城网站设计应该注意什么
商城网站的建设,不是一件简单的事情,当然,也不要把商城网站的建设想得那么的复杂,在建设商城网站的时候 ,只要考虑到以下这些因素,定能把商城网站建设工作做好.那么商城网站建设要考虑哪些因素:(1)风格 ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
- vue+element 实现商品sku效果
在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...
- B2C电子商务系统研发——商品SKU分析和设计（一）
一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...
- 工具类：每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku
# coding:utf-8 # @fileName :2.每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku.py # @createTime :2020/4/4 10:33 ...
随机推荐
- 4.Git分支查看&创建&切换&合并
查看分支 git branch -v # 查看分支,*代表当前所在的分支 创建分支 git branch hot-fix # 创建一个hot-fix分支,然后使用-v查看 # 可以看到除了ma ...
- 第2-1-4章 SpringBoot整合FastDFS文件存储服务
目录 5 SpringBoot整合 5.1 操作步骤 5.2 项目依赖 5.3 客户端开发 5.3.1 FastDFS配置 5.3.2 FastDFS配置类 5.3.3 文件工具类 5.3.4 文件上 ...
- Java8新特性—四大内置函数式接口
Java8新特性--四大内置函数式接口 预备知识 背景 Lambda 的设计者们为了让现有的功能与 Lambda 表达式良好兼容,考虑了很多方法,于是产生了函数接口这个概念. 什么是函数式接口? 函数 ...
- 嵌入式-C语言基础：指针是存放变量的地址，那为什么要区分类型？
指针是存放变量的地址,那为什么要区分类型?不能所有类型的变量都用一个类型吗?下面用一个例子来说明这个问题. #include<stdio.h> int main() { int a=0x1 ...
- 2022春每日一题：Day 28
题目:最大上升子序列和 就是最长上升子序列的改版,贡献由1改为a[i]其他全部不变 代码: #include <cstdio> #include <cstdlib> #incl ...
- Go语言核心36讲23
我在上两篇文章中,详细地讲述了Go语言中的错误处理,并从两个视角为你总结了错误类型.错误值的处理技巧和设计方式. 在本篇,我要给你展示Go语言的另外一种错误处理方式.不过,严格来说,它处理的不是错误, ...
- JavaWeb实战：基础CRUD+批量删除+分页+条件
技术栈及相关参考资料: MyBatis基础 Servlet基础 ServletRequest和ServletResponse MVC模式和三层架构 AJAX基础+Axios基础 Vue前端框架 Ele ...
- i春秋123
打开是个普普通通的登录窗口,下尝试根据提示12341234进行输入,发现不正确...可能1234是指步骤,然后查看源码 发现了绿色的提示信息,我们就根据提示试试打开user.php 打开是白板网页,源 ...
- 【图像处理笔记】SIFT算法原理与源码分析
[图像处理笔记]总目录 0 引言 特征提取就是从图像中提取显著并且具有可区分性和可匹配性的点结构.常见的点结构一般为图像内容中的角点.交叉点.闭合区域中心点等具有一定物理结构的点,而提取点结构的一般思 ...
- 喜欢用Map却从未遭遇内存泄露的Java程序员上辈子都是神仙
前言 点进来这篇文章的大概有两种人,一种是喜欢用Map的想看看自己是不是有可能也会踩雷,一种是不喜欢用Map的想进来看看那些喜欢用的人是怎么踩雷的. 那你要失望了,我只是单纯把公司最近代码审查时一个关 ...