仿京东淘宝商品详情页属性选择js效果
在网上找了好久发现都不符合要求就自己摸索写了一个，用到了linq.js这个linq to js 扩展，不然用纯JS遍历json查询要死人啊
demo：http://123.207.28.46:8086/
效果图：
代码直接拷贝就可以运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
/*sku选择样式*/
li {
list-style: none;
margin-right: 10px;
} li label {
cursor: pointer;
} li {
float: left;
line-height: 30px;
} .clear {
clear: both;
}
.AttributeValue {
border: 1px solid #808080;
padding: 5px 10px;
} .choices {
border-color: #e01313
} .disabled {
border: 1px dashed #b1abab;
background-color: #f1f1f1;
} .disabled label {
cursor: not-allowed;
}
</style>
<script src="http://neue.cc/linq.min.js"></script>
<script> var Combination1 = { Id: 1, ProductId: 21, Attributes: ",9,13,19,21,", StockQuantity: 10, OverriddenPrice: 99 };
var Combination2 = { Id: 2, ProductId: 21, Attributes: ",9,14,20,23,", StockQuantity: 10, OverriddenPrice: 199 };
var Combination3 = { Id: 3, ProductId: 21, Attributes: ",10,16,19,25,", StockQuantity: 10, OverriddenPrice: 299 };
var Combination4 = { Id: 4, ProductId: 21, Attributes: ",10,17,20,24,", StockQuantity: 10, OverriddenPrice: 299 };
var Combination5 = { Id: 5, ProductId: 21, Attributes: ",11,17,20,24,", StockQuantity: 10, OverriddenPrice: 299 };
var Combination6 = { Id: 6, ProductId: 21, Attributes: ",12,14,19,22,", StockQuantity: 10, OverriddenPrice: 299 };
//list:来自数据查询出来的商品组合属性json数据
var list = [];
list.push(Combination1);
list.push(Combination2);
list.push(Combination3);
list.push(Combination4);
list.push(Combination5);
list.push(Combination6);
//SKU_TYPET:来自数据库中商品属性json数据
var SKU_TYPET = [{ AttributeId: 7, Attribute: "颜色", AttributeValues: [{ AttributeValueId: 9, AttributeValue: "金色" }, { AttributeValueId: 10, AttributeValue: "黑色" }, { AttributeValueId: 11, AttributeValue: "银色" }, { AttributeValueId: 12, AttributeValue: "红色" }] }, { AttributeId: 8, Attribute: "版本", AttributeValues: [{ AttributeValueId: 13, AttributeValue: "公开版" }, { AttributeValueId: 14, AttributeValue: "原厂延保版" }, { AttributeValueId: 15, AttributeValue: "双网通版" }, { AttributeValueId: 16, AttributeValue: "无线充套装" }, { AttributeValueId: 17, AttributeValue: "AirPods套装" }, { AttributeValueId: 18, AttributeValue: "分期用版" }] }, { AttributeId: 9, Attribute: "内存", AttributeValues: [{ AttributeValueId: 19, AttributeValue: "64G" }, { AttributeValueId: 20, AttributeValue: "256G" }] }, { AttributeId: 10, Attribute: "套装", AttributeValues: [{ AttributeValueId: 21, AttributeValue: "优惠套装1" }, { AttributeValueId: 22, AttributeValue: "优惠套装2" }, { AttributeValueId: 23, AttributeValue: "优惠套装3" }, { AttributeValueId: 24, AttributeValue: "优惠套装4" }, { AttributeValueId: 25, AttributeValue: "优惠套装5" }] }];
$(function () {
function ishas(AttributeValueIds) {
var newlist = list.concat();
var newAttributeValueIds = AttributeValueIds;
for (var i = 0; i < newAttributeValueIds.length; i++) {
newlist = Enumerable.From(newlist).Where(function (x) {
return x.Attributes.indexOf(newAttributeValueIds[i]) > -1;
}).ToArray();
}
if (newlist.length > 0) {
return true;
} else {
return false;
}
}
init(SKU_TYPET);
//init:绑定商品属性数据
function init(SKU_TYPET) {
var SKU_TYPE = "";
$.each(SKU_TYPET, function (index, item) {
SKU_TYPE += '<ul class="SKU_TYPE"> <li sku-type-name="' + item.Attribute + '">' + item.Attribute + '：</li></ul>';
SKU_TYPE += "<ul>";
$.each(item.AttributeValues, function (i, childitem) {
var AttributeValueIdsArry = [];
AttributeValueIdsArry.push("," + childitem.AttributeValueId + ",");
if (!ishas(AttributeValueIdsArry)) {
SKU_TYPE += '<li class="AttributeValue disabled" data-AttributeId="' + item.AttributeId + '" data-AttributeValueId="' + childitem.AttributeValueId + '"><label>' + childitem.AttributeValue + '</label></li>';
} else {
SKU_TYPE += '<li class="AttributeValue available" data-AttributeId="' + item.AttributeId + '" data-AttributeValueId="' + childitem.AttributeValueId + '"><label>' + childitem.AttributeValue + '</label></li>';
} });
SKU_TYPE += "</ul>";
SKU_TYPE += '<div class="clear"></div>';
}); $("#show").html(SKU_TYPE);
}
//Attribute:已选择的商品属性集合[{ AttributeId: 7, AttributeValueId: 9 }]
var Attribute = [];
//取消已选择属性点击事件
$("body").on("click", ".choices", function (event) {
$(this).removeClass("choices");
$(this).addClass("available");
var AttributeId = $(this).attr("data-AttributeId");
var AttributeValueId = $(this).attr("data-AttributeValueId");
//从Attribute删除已选择属性
var itemIndex = 0;
$.each(Attribute, function (index, item) {
if (item.AttributeId == parseInt(AttributeId)) {
itemIndex = index;
}
});
Attribute.splice(itemIndex, 1);
//重新绑定
$.each(SKU_TYPET, function (index, item) {
$.each(item.AttributeValues, function (i, childitem) {
var newAttributeValueIds = Enumerable.From(Attribute).Select(function (x) { return x.AttributeValueId }).ToArray();
var AttributeValueIdsArry = [];
$.each(Attribute, function (i, it) {
AttributeValueIdsArry.push("," + it.AttributeValueId + ",");
});
AttributeValueIdsArry.push("," + childitem.AttributeValueId + ",");
if (!ishas(AttributeValueIdsArry)) {
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("disabled");
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("available"); } else {
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("disabled");
if (!$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").hasClass("choices")) {
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("available");
}
}
}); }); });
//选择属性点击事件
$("body").on("click", ".available", function () {
var AttributeId = $(this).attr("data-AttributeId");
var AttributeValueId = $(this).attr("data-AttributeValueId");
//先判断Attribute是否存在该属性，
if (Enumerable.From(Attribute).ToLookup("$.AttributeId").Contains(parseInt(AttributeId))) {
$.each(Attribute, function (index, item) {
//存在更新其值
if (item.AttributeId == parseInt(AttributeId)) {
item.AttributeValueId = parseInt(AttributeValueId);
}
});
}
//不存在则添加
else {
Attribute.push({ AttributeId: parseInt(AttributeId), AttributeValueId: parseInt(AttributeValueId) });
}
//循环每一项属性值并查询
$.each(SKU_TYPET, function (index, item) {
$.each(item.AttributeValues, function (i, childitem) {
var newAttributeValueIds = Enumerable.From(Attribute).Select(function (x) { return x.AttributeValueId }).ToArray();
var AttributeValueIdsArry = [];
$.each(Attribute, function (i, it) {
AttributeValueIdsArry.push("," + it.AttributeValueId + ",");
});
AttributeValueIdsArry.push("," + childitem.AttributeValueId + ",");
if (!ishas(AttributeValueIdsArry)) {
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("disabled");
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("available"); } else {
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("disabled");
if (!$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").hasClass("choices")) {
$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("available");
} }
}); });
$(this).removeClass("available");
$(this).addClass("choices"); });
$("#Button1").click(function () {
if (Attribute.length != SKU_TYPET.length) {
$("#show").css("border", "2px solid #ff0000");
alert("请选择您要的商品信息");
} else {
$("#show").css("border", "0");
alert("你已选择："+JSON.stringify(Attribute));
}
})
});
</script>
</head>
<body>
<div id="show" style="width:100%;">
</div>
<input id="Button1" type="button" value="购买" style="margin-left:98px;margin-top:20px" /> </body>
</html>
仿京东淘宝商品详情页属性选择js效果的更多相关文章
- vue实现淘宝商品详情页属性选择功能
方法一是自己想出来的,方法二来自忘记哪里看到的了 不知道是不是你要的效果: 方法一:利用input[type="radio"] css代码: input { display: no ...
- 仿淘宝商品详情页上拉弹出新ViewController
新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...
- iOS app url scheme跳转到淘宝商品详情页 唤醒app
最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...
- android仿京东、淘宝商品详情页上拉查看详情
话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...
- 第十二篇、OC_仿淘宝商品详情页的翻页
// // GFBProductViewController.m // elmsc // // Created by MAC on 2016/11/26. // Copyright © 2016年 G ...
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- Android 仿电商app商品详情页按钮浮动效果
1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,he ...
- 淘宝商品html--网页结构
淘宝商品html--网页结构 本篇爬虫紧接上一篇关于 泸州老窖 的爬虫随笔: import re import json def get_space_end(level): return ' ' * ...
- Android之仿京东淘宝的自动无限轮播控件
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...
随机推荐
- luogu P3801 红色的幻想乡
嘟嘟嘟 首先人人都能想到是线段树,不过二维线段树肯定会MLE+TLE的. 我们换一种想法,不去修改整个区间,而是修改一个点:开横竖两个线段树,分别记录哪些行和列被修改了.因为如果两阵红雾碰撞,则会因为 ...
- 美化浏览器JSON格式
工具下载地址: https://github.com/weibanggang/JSON-handle 原始 优化后 直接将文件拖到浏览器即可
- ETL测试小结
一.ETL测试的重要性: ETL(Extract-Transform-Load的缩写,即数据抽取.转换.装载的过程)作为BI/DW(Business Intelligence)的核心和灵魂,能够按照统 ...
- Grunt中批量无损压缩图片插件－－Grunt-contrib-imagemin
Photoshop 切出的图片,无论是 PNG 还是 JPEG/JPG 格式,都含有许多相关信息,又或多余的颜色值,这些信息和颜色值,对网页前端并没有用处,反而增加图片大小,所以 Google Pag ...
- 我想写一个前端开发工具（三）:优化！从vue-cli学了几招
我从过年开始写自己的前端工具 coodev,目前已经写出一个基本的架子,大多数预想的功能都能跑通,还剩一些需要解决的问题也都已经列出来了.本来这一周打算解决对不同后端模板的前后端渲染支持的问题.但是看 ...
- linux mysql命令行查看显示中文
linux 命令行查看mysql的库字符集是utf8,查询某个表时,仍然是显示不了中文, 之后使用了命令 mysql>set names utf8;就可以正常显示中文了. 如何才更好的使mys ...
- 自己封装了的AlertController
一直觉得使用系统这个东西写起来特别麻烦,每次都要写一大推东西,还是重复的,今天抽了点时间自己重新封装了一下,解决了自己的强迫症...,不多说,直接上代码了. 1.自己定义了一个名为XBZ的UIAler ...
- SpringMVC——笔记
使用 @RequestMapping 映射请求 Spring MVC 使用@RequestMapping 注解为控制器指定可以处理那些URL请求. 在控制器的类定义及方法定义处都可以标注 @Reque ...
- 用http.get()简单实现网络验证防止客户不给尾款_电脑计算机编程入门教程自学
首发于:用http.get()简单实现网络验证防止客户不给尾款_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=428 给软 ...
- redhat6 快速部署percona
1.首先得能访问外网 2.yum install http://www.percona.com/downloads/percona-release/redhat/0.1-4/percona-relea ...