Question

我正在跟踪事件（出于数据分析目的），并且我正在查看的当前页面具有多个弹出屏幕。我知道在没有看到所有HTML的情况下会感到困惑，所以我将尽力解释，请忍受：

单击#verifyAccountBtn时，将显示第一个弹出屏幕。它包含一个复选框。
如果在第一个弹出屏幕上单击“继续”，则会出现第二个弹出屏幕，其中包括一个滑块，您可以在该弹出窗口的3个不同的幻灯片之间切换。

这是我的代码，我将尽我所能尝试解释注释：

// functions only execute if the pop-up overlay is present: 

 $(document).on("overlayIsVisible", function (e, overlayName) {

                var checkboxChecked = false;

                $(document).on("click", "#verifyAccountBtn", function () {
                    checkIfVerifyAccountPopUpVisible()
                })

                function checkClick() {
                    // #isVerificationUrgent is the checkbox id
                    $("#isVerificationUrgent").off().on('click', function () {
                        checkboxChecked = !checkboxChecked;
                        checkIfVerifyAccountPopUpVisible();
                    });
                }

                function checkIfVerifyAccountPopUpVisible() {

                    if ($("#verifyAccountReminder").hasClass('is-visible')) {
                        checkClick();
                        trackEvent();
                    }
                }

                function trackEvent() {
                   // data tracking code goes here which works. The next line is to track whether checkbox has been checked or not. 

                            'checkbox checked': checkboxChecked
                        });
                }

               // The following are the buttons to toggle between the next pop ups. 

                $('[aria-label="Go to slide 1"]').off().on('click', function () {
                    trackEvent();
                });
                $('[aria-label="Go to slide 2"]').off().on('click', function () {
                    trackEvent();
                });
                $('[aria-label="Go to slide 3"]').off().on('click', function () {
                    trackEvent();
                });

当前，checkbox属性适用于第一个弹出窗口（包含该复选框），但是当第二个复选框出现并且checkboxChecked的状态恢复为false时，该属性不会持久（尽管我认为包含checkboxChecked变量可以防止这种情况，如果在第一个弹出屏幕上单击复选框，它将保留为true。

有人可以帮助我确保一旦checkboxChecked属性更改为'true'，在用户浏览其余弹出屏幕时，该属性将保持为true？

希望我已经足够清楚地解释了这一点。非常感谢任何帮助，因为我对Javascript和JQuery还是比较陌生。谢谢！

如何在Javascript中保持复选框的状态

0 个答案: