0

我曾经有两个在拇指上下滑动的按钮记住状态并在刷新时加载它。它看起来像这样。

       var thumbStatus;
        //If thumbs up is tapped change styles of each button and save to     LocalStorage
        function thumbsup() {
        document.getElementById("thumbsup").classList.remove("btn-default")
        document.getElementById("thumbsup").classList.add("btn-success")
        document.getElementById("thumbsdown").classList.remove("btn-danger")
        document.getElementById("thumbsdown").classList.add("btn-default")
        localStorage.setItem('thumbstatus3840210', 'up');
        }

        //If thumbs down is tapped change styles of each button and save to LocalStorage
        function thumbsdown() {
        document.getElementById("thumbsdown").classList.remove("btn-default")
        document.getElementById("thumbsdown").classList.add("btn-danger")
        document.getElementById("thumbsup").classList.remove("btn-success")
        document.getElementById("thumbsup").classList.add("btn-default")
        localStorage.setItem('thumbstatus3840210', 'down');
        }

        //If thumbs up was the last button to be tapped, show this on page load
        function Loadthumbs() {
        if (localStorage.getItem('thumbstatus3840210') === 'up') {
        thumbsup();
        }

        //If thumbs down was the last button to be tapped, show this on page load
        if (localStorage.getItem('thumbstatus3840210') === 'down') {
        thumbsdown();
        }
        }

我怎样才能使用 Jquery 做到这一点。到目前为止，我有这个。它只设置按钮的样式目前没有保存数据？

 $(function() {
        $("#thumbsup").click(function() {
            $(this).addClass("thumbsup")
            $("#thumbsdown").removeClass("thumbsdown")
        });

        $("#thumbsdown").click(function() {
            $(this).addClass("thumbsdown")
            $("#thumbsup").removeClass("thumbsup")
        });

    });
4

1 回答 1

1

我猜这就是你想要的（你自己的 jQuery 没有多大意义）。我在他们自己的地方编写了该函数，因此您可以轻松地编辑它们或在其他调用中使用它们，但您肯定可以将它们直接放在 click 函数中。我还认为您想在准备好文档时运行 loadthumbs 函数，所以我也这样做了。

另外，我使用了 else-if 函数。对我来说，这似乎比两个 if 函数更合乎逻辑。也可以简单地使用 else 函数，但我不知道可以为该项目赋予哪些值。所以为了安全起见， else if 似乎很好。

$(document).ready(function () {
    function thumbsup() {
        $("#thumbsup").removeClass("btn-default").addClass("btn-success");
        $("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'up');
    }
    function thumbsdown() {
        $("#thumbsdown").removeClass("btn-default").addClass("btn-success");
        $("#thumbsup").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'down');
    }
    function Loadthumbs() {
        if (localStorage.getItem('thumbstatus3840210') === 'up') {
            thumbsup();
        }
        else if (localStorage.getItem('thumbstatus3840210') === 'down') {
            thumbsdown();
        }
    }
    Loadthumbs();
    $("#thumbsup").click(function() {
        thumbsup();
    });
    $("#thumbsdown").click(function() {
        thumbsdown();
    });
});

或者：

$(document).ready(function () {
    function Loadthumbs() {
        if (localStorage.getItem('thumbstatus3840210') === 'up') {
            thumbsup();
        }
        else if (localStorage.getItem('thumbstatus3840210') === 'down') {
            thumbsdown();
        }
    }
    Loadthumbs();
    $("#thumbsup").click(function () {
        $(this).removeClass("btn-default").addClass("btn-success");
        $("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'up');
    });
    $("#thumbsdown").click(function () {
        $(this).removeClass("btn-default").addClass("btn-success");
        $("#thumbsup").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'down');
    });
});
于 2013-10-14T16:03:10.890 回答