jquery加购物车功能

如下图所示：

 点击加入购物车，由下到上出现此弹窗，点击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);
    });
}