如下图所示:
点击加入购物车,由下到上出现此弹窗,点击close关闭弹窗。
$(".addCar").on("click", function() { var $this = $(this); $('#dialog').show(); setTimeout(function() { $(".dialog-content").eq(0).animate({ height: "90%" }, 500); }, 10); });
// 关闭按钮 $('.dialog_close').on('click', function() { setTimeout(function() { $('#dialog').hide(); }, 600); $(".dialog-content").eq(0).animate({ height: "0" }, 500); })
初始化有默认选中,有单选和多选,选中之后已选部分的数据也跟着变化
// 初始化以及切换按钮 let arr = ['.btn-size', '.btn-add', '.btn-candle', '.btn-other'], str = '', strArr = [], sizeArr = [$('.btn-size:first').html()], addArr = [], candleArr = [], otherArr = []; strArr = [...sizeArr, ...addArr, ...candleArr, ...otherArr]; str = strArr.join('/'); $('.choosed').html(str); $('.btn-size:first').addClass('highLight') for (let i in arr) { $(arr[i]).click(function() { let $that = $(this); switch (arr[i]) { case '.btn-size': // 单选 sizeArr = []; sizeArr.push($that.html()); $that.addClass('highLight').siblings().removeClass('highLight'); break; case '.btn-add': // 多选 let Index1 = addArr.indexOf($that.html()) if (Index1 < 0) { addArr.push($that.html()); $that.addClass('highLight'); } else { addArr.splice(Index1, 1); $that.removeClass('highLight'); } break; case '.btn-candle': let Index2 = candleArr.indexOf($that.html()) if (Index2 < 0) { candleArr.push($that.html()); $that.addClass('highLight'); } else { candleArr.splice(Index2, 1); $that.removeClass('highLight'); } break; case '.btn-other': let Index3 = otherArr.indexOf($that.html()) if (Index3 < 0) { otherArr.push($that.html()); $that.addClass('highLight'); } else { otherArr.splice(Index3, 1);; $that.removeClass('highLight'); } break; } strArr = [...sizeArr, ...addArr, ...candleArr, ...otherArr]; str = strArr.join('/'); $('.choosed').html(str); }); }