商品绑定可用的优惠券(多对多的绑定且一张优惠券只能使用于一个商品)

需求：

1.绑定商品可用的优惠券，按面值大小倒序。

2.当优惠券支持多个商品使用时，勾选了当前优惠券，其它商品下同张优惠券置灰，不可选。

#效果图如下：

#完整代码如下：

<html>
<head><style type="text/css">* {-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;}#product .pli {list-style-type: none;padding: 5px 0;border-bottom: 1px solid #ccc;}.pli p {padding: 5px 0;margin: 0;font-size: 18px;}.ticket li {line-height: 25px;width: 200px;}.t_li {cursor: pointer;margin: 2px 0;border: 1px solid #fff;}.t_li:hover {background-color: #AFEEEE;}.ticket .check {background-color: #48D1CC;border-color: #1c6a9e;}.ticket .disabled {background: #b1b1b1;}.msg {padding: 20px;display: none;width: 500px;height: 300px;position: fixed;top: 100px;left: 300px;border: 1px solid #ccc;border-radius: 10px;box-shadow: 7px 7px 11px 0px #ccc;background-color: #fff;}</style><script type="application/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script type="application/javascript">var ticketList = new Array();//获取优惠券function getTicket() {var t1 = {id: 1, type: 1, amount: 2, name: '卡券a'};var t2 = {id: 2, type: 2, amount: 5, name: '卡券b'};var t3 = {id: 3, type: 1, amount: 2, name: '卡券c'};var t4 = {id: 4, type: 3, amount: 7, name: '卡券d'};var t5 = {id: 5, type: 2, amount: 9, name: '卡券e'};var t6 = {id: 6, type: 1, amount: 1, name: '卡券f'};var t7 = {id: 7, type: 1, amount: 2, name: '卡券g'};var t8 = {id: 8, type: 3, amount: 2, name: '卡券h'};var t9 = {id: 9, type: 3, amount: 2, name: '卡券i'};var t10 = {id: 10, type: 2, amount: 2, name: '卡券j'};ticketList.push(t1);ticketList.push(t2);ticketList.push(t3);ticketList.push(t4);ticketList.push(t5);ticketList.push(t6);ticketList.push(t7);ticketList.push(t8);ticketList.push(t9);ticketList.push(t10);ticketList.sort(compare("amount"));return ticketList;}function compare(prop) {return function (obj1, obj2) {var val1 = obj1[prop];var val2 = obj2[prop];if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {val1 = Number(val1);val2 = Number(val2);}if (val1 < val2) {return 1;} else if (val1 > val2) {return -1;} else {return 0;}}}function toMap(ticket) {var map = {};for (var i = 0; i < ticket.length; i++) {var list = new Array();var key = ticket[i].type;if (map[key] != undefined && map[key].length > 0) {list = map[key];}list.push(ticket[i]);map[key] = list;}return map;}//加载优惠券function loadTicket() {var ticket = getTicket();var ticketMap = toMap(ticket);$("#product .pli").each(function () {var type = $(this).attr("type");var html = "";var list = new Array();if (type != "") {list = ticketMap[type];}if (type == "") {list = list.concat(ticketMap[2]);list = list.concat(ticketMap[3]);list.sort(compare("amount"));}if (list == undefined || list.length == 0) {return;}for (var i = 0; i < list.length; i++) {html += "<li class='t_li t_li_" + list[i].id + "' tid='" + list[i].id + "' name='" + list[i].name + "' amount='" + list[i].amount + "'>卡券:" + list[i].name + "(" + list[i].amount + "元)</li>";}$(this).find(".ticket").html(html);});}$(document).ready(function () {loadTicket();});//优惠券选择事件$(document).on("click", ".t_li", function () {if ($(this).hasClass("disabled")) {return;}var className = ".t_li_" + $(this).attr("tid");if ($(this).hasClass("check")) {$(this).removeClass("check");$(className).removeClass("disabled");} else {$(className).not($(this)).addClass("disabled");$(this).addClass("check");}});//按钮点击事件$(document).on("click", "#btn", function () {var html = "";$(".pli").each(function () {var that = $(this);html += "<p>" + that.find("p").html() + ",";var checkTicket = "";that.find(".ticket .check").each(function () {checkTicket += $(this).attr("name") + "(" + $(this).attr("amount") + ")元;";});if (checkTicket != "") {checkTicket = checkTicket.substring(0, checkTicket.length - 1);html += '已选择:' + checkTicket ;}else {html += "无选择优惠券";}html += "</p>";});$(".msg").html(html);$(".msg").show();});$(document).on("click", ".main", function () {$(".msg").hide();});</script>
</head>
<body>
<div class="main"><ul id="product"><li class="pli" type="1"><p>商品1</p><div class="ticket"></div></li><li class="pli" type="2"><p>商品2</p><div class="ticket"></div></li><li class="pli" type="3"><p>商品3</p><div class="ticket"></div></li><li class="pli" type=""><p>商品4</p><div class="ticket"></div></li></ul>
</div>
<button id="btn">确认</button>
<div class="msg"></div>
</body>
</html>

商品绑定可用的优惠券(多对多的绑定且一张优惠券只能使用于一个商品)相关推荐

2022稳定版全网拼多多商品详情api接口sku，详情信息，促销价，优惠券信息等
2022稳定版全网拼多多商品详情api接口sku,详情信息,促销价,优惠券信息等 {"code": 1,"state": true,"msg" ...
多对多查询:一个用户创建多个订单，一个订单包含多个订单明细，一个订单明细包含一个商品
<resultMap type="com.hbut.po.User&q ...
一个商品SKU是怎么生成的 1
首先说一说什么是SKU.......自己百度去... 类似京东上面,未来人类S5这个台笔记本都是S5这个型号,但是因为CPU,显卡,内存,硬盘等不同,价格也不一样.CPU,显卡,内存,硬盘等属性组合 ...
怎么绑定虚拟服务器,虚拟服务器里怎样绑定ip地址
虚拟服务器里怎样绑定ip地址内容精选换一换在高可用部署场景下,ASCS主备节点通过共享盘实现数据同步.本章节指导用户将ASCS主节点的数据盘绑定给ASCS备节点并为ASCS主备节点绑定浮动IP. ...
删除商品信息恢复的java_零基础学习java------35---------删除一个商品案例，删除多个商品，编辑（修改商品信息），校验用户名是否已经注册（ajax）...
一. 删除一个商品案例将要操作的表格思路图前端代码 > Insert title here 查詢商品列表 idnamecategorypnumdescription描述${product. ...
【商品架构day2】一个商品的领域模型长什么样子 - 淘宝十多年前的认知
本文来自李平老师的分享,主要介绍一个普遍对商品模型的认知.这个认知已经很久没有更新了,十几年前的吧.所以这里在告诉大家历史是什么样,更要去思考哪里有错误.哪里要改进. SPU.SKU概念首先我们需要 ...
2d抽奖规则_【内含抽奖】万张优惠券送送送，免费影票抽抽抽，万达影城带你薅羊毛！...
全年免费观影福利点击下方链接立即参与 [我们9岁啦]全年免费观影/爆米花/哈根达斯送送送,中原万达影城感恩有你,一路相伴! 今年的双十一比往年来的更早一些你是否也在预售的直播间熬红了眼? 是否已 ...
java 绑定事件_Javascripts事件基础和事件绑定
javascript事件基础和事件绑定一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为 2.事件源引发事件的元素(发生在谁身上) 3.事件处理的程序对事件处理的程 ...
Repeater 嵌套绑定数据，嵌套的Repeater无法绑定的问题
Repeater 嵌套绑定数据,嵌套的Repeater无法绑定的问题今天做绑定遇到了这个么个问题,绑定的事件ItemDataBound()跟之前的并没有改动,为什么会出现绑定失败的问题呢?要是你 ...

商品绑定可用的优惠券(多对多的绑定且一张优惠券只能使用于一个商品)

商品绑定可用的优惠券(多对多的绑定且一张优惠券只能使用于一个商品)相关推荐

最新文章

热门文章