Question

基本上，我有一个约会表格，该约会表格细分为多个面板。

步骤1-如果用户单击伦敦（＃Store1），然后在面板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");
        }
    });
}

我不确定这是否写得正确，所以任何帮助或建议都很好

预先感谢

Answer 1

不要将其视为“存储点击”。而是将可点击元素视为具有某种数据值，然后存储所选值。从该值可以导出对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的总体结构和流程。如果您需要在多个页面上保存数据（使用“面板”一词意味着更多的是单页设置，但不一定是这种情况），那么您也可以使用本地存储来保存诸如{{ 1}}在页面上下文之间。

但是最终归结为结构化数据，将UI元素与该数据相关联以及基于该数据执行逻辑以操纵这些UI元素。基本上，应该基于UI交互更新数据（即使只是内存变量），而不是仅基于UI交互来操纵UI元素，然后根据数据更新UI。

存储点击值以供以后使用

1 个答案: