存儲點擊值以供以后使用

Question

基本上，我有一個約會表格，該約會表格分為幾個面板。

步驟1-如果用戶單擊london（＃Store1），則在面板5的日歷中隱藏Sunday和Monday。

基本上，我想存儲此點擊，以便當用戶進入日歷面板時，它將知道不顯示星期日和星期一

$('#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");
        }
    });
}

我不確定這是不是寫得正確，所以任何幫助或建議都很好

提前致謝

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的總體結構和流程。 如果您需要堅持在多個頁面的數據（你的字用“板”是指多單頁面設置的，但不一定是這樣），那么你還可以使用本地存儲來堅持的東西像selectedStore之間頁面上下文。

但是最終歸結為結構化數據，將UI元素與該數據相關聯以及基於該數據執行邏輯以操縱這些UI元素。 基本上，應該基於UI交互更新數據（即使只是內存中的變量），而不是僅基於UI交互來操縱UI元素，然后根據數據更新UI。

Answer 2

您可以為此使用本地存儲，然后從任何地方獲取價值。

設定你的價值

localStorage.setItem("store1", JSON.stringify(true))

獲得價值，然后就可以在任何地方使用它：

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

例：

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