Javascript 存储单击值以供以后使用

基本上，我有一个预约表，它分为几个小组

步骤1-如果用户单击伦敦商店1，则在面板5中的日历中隐藏星期日和星期一

基本上，我想存储这个点击，这样当用户进入日历面板时，它将知道不显示星期天和星期一

$('#store1').click(function () {
    var $store1 = $(this).data('clicked', true);
    console.log("store 1 clicked");
    $('.Sunday').hide();
    $('.Monday').hide();
});

当我在一个变量中捕获了它之后，我想在日历显示时运行它

function ReloadPanel(panel) {
    return new Promise(function (resolve, reject, Store1) {
        console.log(panel);
        console.log("finalpanel");
        panel.nextAll('.panel').find('.panel-updater').empty();
        panel.nextAll('.panel').find('.panel-title').addClass('collapsed');
        panel.nextAll('.panel').find('.panel-collapse').removeClass('in');
        var panelUpdater = $('.panel-updater:eq(0)', panel),
                panelUrl = panelUpdater.data('url');

        if (panelUpdater.length) {
            var formData = panelUpdater.parents("form").serializeObject();
            panelUpdater.addClass('panel-updater--loading');
            panelUpdater.load(panelUrl, formData, function (response, status) {
                panelUpdater.removeClass('panel-updater--loading');
                if (status == "error") {
                    reject("Panel reload failed");
                } else {
                    resolve("Panel reloaded");
                }
            });
        } else {
            resolve("no reloader");
        }
    });
}

我不确定这是不是写对了，所以任何帮助或建议都会很好

---

提前感谢

您可以使用本地存储进行此操作，然后您可以从任何地方获取您的价值

设定你的价值

获取您的价值，然后您可以在任何地方使用它：

JSON.parse(localStorage.getItem("store1"))

例如：

$'store1'。单击函数{ var$store1=$this.data'clicked'，true； localStorage.setItemstore1，JSON.stringifytrue console.logstore 1被点击； $‘星期日’。隐藏； $'.Monday'。隐藏；

---

}; 不要将其视为存储单击。相反，请考虑您的可点击元素具有某种数据值，并存储所选值。从该值可以导出对UI的更改

例如，考虑一些具有值的可点击元素：

<button type="button" class="store-button" data-store-id="1">London</button>
<button type="button" class="store-button" data-store-id="2">Paris</button>
<button type="button" class="store-button" data-store-id="3">Madrid</button>

现在，您可以访问selectedStore变量的任何地方都可以知道当前选择的存储。假设您有一些数据结构，可以用来确定要显示/隐藏的日期？例如，假设您有一个商店列表，每个商店都有有效天数：

let stores = [
  { id: 1, name: 'London', days: [2,3,4,5,6] },
  // etc.
];

“日期”按钮具有相应的日期ID值：

<button type="button" class="day-button" data-day-id="1">Sunday</button>
<button type="button" class="day-button" data-day-id="2">Monday</button>
<!--- etc. --->

有多种方法可以做到这一点，其中大部分可能取决于用户体验的总体结构和流程。如果需要跨多个页面持久化数据，则使用word面板意味着更多的是单页面设置，但情况可能并非如此，那么您也可以使用本地存储在页面上下文之间持久化selectedStore之类的内容

---

但归根结底，它只是要构造数据，将UI元素与该数据关联起来，并基于该数据执行逻辑以操作这些UI元素。基本上，您不应该仅基于UI交互操作UI元素，而应该更新数据，即使它只是基于UI交互的内存变量，然后基于数据更新UI。

我看不出您在重新加载函数中检查数据属性的位置。另外，在设置数据属性时，您需要确保在检查该数据属性之前未刷新或重新加载页面-调用重新加载函数时不清楚-是在页面加载还是在ajax请求之后？

let stores = [
  { id: 1, name: 'London', days: [2,3,4,5,6] },
  // etc.
];

<button type="button" class="day-button" data-day-id="1">Sunday</button>
<button type="button" class="day-button" data-day-id="2">Monday</button>
<!--- etc. --->

$('.day-button').hide();
for (let i in stores) {
    if (stores[i].id === selectedStore) {
        for (let j in stores[i].days) {
            $('.day-button[data-day-id="' + stores[i].days[j] + '"]').show();
        }
        break;
    }
}