时间戳

首页 > 解决方案 > 存储点击值以供以后使用

javascript - 存储点击值以供以后使用

问题描述

基本上，我有一个约会表格，它被分成几个小组。

第 1 步 - 如果用户单击 london (#Store1)，则从面板 5 的日历中隐藏星期日和星期一。

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

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

在我在 var 中捕获它之后，我想在日历显示时运行它。

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");
        }
    });
}

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

提前致谢

标签： javascript

解决方案

不要将其视为“存储点击”。相反，将您的可点击元素视为具有某种数据值并存储所选值。您可以从该值派生出对 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>

您有多个“商店”按钮。与其将点击事件单独绑定到每个点击事件并为每个点击事件自定义 UI，不如创建一个捕获点击值的通用事件。就像是：

let selectedStore = -1;
$('.store-button').on('click', function () {
    selectedStore = $(this).data('store-id');
});

现在，您可以访问该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. --->

您现在可以使用必须的数据来派生要显示/隐藏的按钮。也许是这样的：

$('.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;
    }
}

有多种方法可以做到这一点，其中大部分可能取决于您的 UX 的整体结构和流程。如果您需要跨多个页面保存数据（您使用“面板”这个词意味着更多的单页面设置，但不一定是这种情况），那么您还可以使用本地存储来保存selectedStore页面之间的内容上下文。

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

推荐阅读