Question

场景：

在电子商务网站上工作。
我整理了一个函数：
- 更新总数购物篮图标中的项目，以及
- 还可以在用户增加时进行调整或减少实际购物篮页面中某项的数量。
- 我正在使用本地存储来获取和更新信息。

该特定的购物篮页面在新窗口中打开。该购物篮图标几乎显示在网站的所有其他页面上。

问题：

即使用户在后台打开了另一个页面，我也希望该页面也刷新以反映在购物篮图标中显示的新数量，然后他们第二次从购物篮页面调整数量。
当用户关闭购物篮页面并想要继续时购物，原始页面-在打开购物篮页面之前-具有购物篮图标中更新的商品数量。
用户可以通过三种方式调整购物篮中的物品数量。每个产品都有一个增加/减少按钮，还有一个输入字段，用户可以在其中手动输入数字，并且购物篮数量图标将反映新的更改。

以下功能将在用户单击增加或减少符号时更改项目的数量

document.body.addEventListener("click", function(e) {
    var reg = /\w{7}\d+/g;
    if (e.target.classList[0] === "increaseQty") {
        var getItem = getLocalStorageData("basketData");
        getItem.basketQty++;
        document.getElementById("item-count").innerHTML = getItem.basketQty;
        e.target.previousSibling.value++;
        var currentProduct = e.target.previousSibling.id;
        currentProduct = currentProduct.match(reg);
        currentProduct = currentProduct.toString();
        getItem[currentProduct]++;
        updateLocalStorage(getItem);
        for (var i = 0; i < productCats.length; i++) {
            if (productCats[i][currentProduct]) {
                var currentPrice = e.target.previousSibling.value * productCats[i][currentProduct].price;
                var currentLi = e.target.parentNode;
                currentLi.parentNode.lastChild.innerHTML = "£" + currentPrice;
                getTotalCost();
            }
        }
    } else if (e.target.classList[0] === "decreaseQty") {
        if (e.target.nextSibling.value > 0)
            var getItem = getLocalStorageData("basketData");
        getItem.basketQty--;
        document.getElementById("item-count").innerHTML = getItem.basketQty;
        e.target.nextSibling.value--;
        var currentProduct = e.target.nextSibling.id;
        currentProduct = currentProduct.match(reg);
        currentProduct = currentProduct.toString();
        getItem[currentProduct]--;
        updateLocalStorage(getItem);
        for (var i = 0; i < productCats.length; i++) {
            if (productCats[i][currentProduct]) {
                var currentPrice = e.target.nextSibling.value * productCats[i][currentProduct].price;
                var currentLi = e.target.parentNode;
                currentLi.parentNode.lastChild.innerHTML = "£" + currentPrice;
                getTotalCost();
            }
        }
    } else {
        return;
    }
})

$("#basket-content").on("change", 'input[name="nameQty"]', function() {
    var getItem = getLocalStorageData("basketData");
    var regNum = /\d+/;
    var currentQty = this.id;
    var currentVal = this.value;
    var reg = /\w{7}\d+/g;
    var product = currentQty.match(reg);
    product = product.toString();
    if (!regNum.test(currentVal) || currentVal < 0) {
        alert("Please enter a valid number");
        document.getElementById(currentQty).value = getItem[product];
        return;
    } else if (currentVal > getItem[product]) {
        var addQty = currentVal - getItem[product];
        getItem.basketQty += addQty;
        document.getElementById("item-count").innerHTML = getItem.basketQty;
        getItem[product] = currentVal;
    } else if (currentVal < getItem[product]) {
        var minusQty = getItem[product] - currentVal;
        getItem.basketQty -= minusQty;
        document.getElementById("item-count").innerHTML = getItem.basketQty;
        getItem[product] = currentVal;
    }
    for (var i = 0; i < productCats.length; i++) {
        if (productCats[i][product]) {
            var currentPrice = currentVal * productCats[i][product].price;
            document.getElementById(currentQty).parentNode.nextSibling.innerText = "£" + currentPrice.toFixed(2);
            getTotalCost();
        }
    }
    updateLocalStorage(getItem);
});

使用JavaScript刷新背景页面？

0 个答案: