Question

所以我们有一个结帐，在结账时，您可以选择2个插件，现在我似乎遇到的问题是确定是否勾选了这些选项并显示正确的样式所以让我说我检查了两个选项到了付款页然后取消它保存它们被检查但没有显示样式。

我对此的初步修复是在单击插件时将local存储在localstorage中，然后在页面加载时保存，如果localstorage包含它然后将样式应用到插件，但是，我似乎无法应用它两者都只适用于1，请参阅下面的jQuery。

$(function () {

    addonClass = function(e) {
        $(e).toggleClass("addon-active");
        $(e).find("label .add").toggle(400);
        $(e).find("label .added").toggle(800);
        if ($(window).width() < 600) {
            $(e).find("label .fiver").toggle(400);
        }
    }

    if (localStorage.getItem('addonooh') === "true") {
        addonClass('.first');
        $('.first').find('.add, .fiver').hide();
        $('.last').find('.fiver').show();

    } else if (localStorage.getItem('addon') === "true") {
        addonClass('.last');
        $('.last').find('.add, .fiver').hide();
        $('.first').find('.fiver').show();

    } else if (localStorage.getItem('addonooh') === "true" && localStorage.getItem('addonvm') === "true") {
        addonClass('.first, .last');
        $('.first, .last').find('.fiver').show();

    } else {
    }

    if ($(window).width() > 600) {
        $(".additional-features__item").hover(function () {
            $(this).toggleClass("addon-active-hover");
            $(this).find("label .fiver").stop(true, true).toggle(400);
            $(this).find("label .add").stop(true, true).toggle(800);
            if ($(this).hasClass('addon-active')) {
                $(this).find("label .fiver, label .add").hide();
            }
        });
    }

    if ($(window).width() < 600) {
        $(this).find("label .add").remove();
    }

    $(".additional-features__item").click(function () {

        if ($(this).hasClass('first')) {
            localStorage.addonooh = 'true';
        } else {
            localStorage.addonvm = 'true';
        }


        if ($(this).hasClass('.first') && ($(this).hasClass('.addon-active'))) {
            localStorage.addonooh = '';
        } else if ($(this).hasClass('.last') && ($(this).hasClass('.addon-active'))) {
            localStorage.addonvm = '';
        }

        addonClass(this);
        var checkbox = $(this).find(".mobile-answering__standard-feature");
        checkbox.prop('checked', !checkbox.prop('checked'));
    });
});

Answer 1

我认为问题出在您的if - elseif - else区块中。如果addonooh中选中localStorage，则执行将进入if (localStorage.getItem('addonooh') === "true") {。由于您的其余分支与else if和else相关联，因此其他分支将永远不会被执行。

您要做的是更改条件检查的顺序，如下所示：

if (localStorage.getItem('addonooh') === "true" && localStorage.getItem('addonvm') === "true") {
    addonClass('.first, .last');
    $('.first, .last').find('.fiver').show();
} else if (localStorage.getItem('addonooh') === "true") {
    addonClass('.first');
    $('.first').find('.add, .fiver').hide();
    $('.last').find('.fiver').show();

} else if (localStorage.getItem('addon') === "true") {
    addonClass('.last');
    $('.last').find('.add, .fiver').hide();
    $('.first').find('.fiver').show();
}  else {
    // dont care
}

这样您首先检查是否设置了两个复选框。否则，您检查是否只设置了其中一个复选框。

编辑1 为了在取消选中复选框时清除localstorage，请更改复选框的click处理程序中的代码位。

if ($(this).hasClass('first')) {
    localStorage.setItem("addonooh", $(this).prop('checked'));
} else {
    localStorage.setItem("addonvm", $(this).prop('checked'));
}

请注意，您不应该像在问题中那样直接修改localStorage值，而是使用localStorage.setItem更改它们

如果单击了复选框，则为Localstorage商店

1 个答案: