Question

每次点击特定按钮时，一页的DIV（例如page01.php）翻转180°。简单来说，这个按钮每次都会向DIV（旋转180°）添加或删除一个类（旋转器）。

当我按下另一个按钮来更改页面时（到page02.php）我需要检查page01.php中的DIV是否有这个类（旋转器），如果这个类被应用，我需要将它发送到page02.php并将同一个类应用于另一个DIV，看起来与page01.php相同。

这是jQuery中的Button：

$(".btn-rotate").click(function() {
    if ($("#box").hasClass("rotator")) {
        $("#box").removeClass("rotator");
    } else {
        $("#box").addClass("rotator");
    }
})

这是DIV：

<div id="box" class="content-background bg-index">

这是Rotator的CSS：

.rotator {
    transform: rotate(180 deg);
    transform - origin: center;
}

我正在考虑使用jQuery的POST和GET，但我真的不知道如何发送信息。

有人可以有个主意吗？

谢谢！

埃克托

Answer 1

使用本地存储，

$(".btn-rotate").click(function(){
    if ($("#box").hasClass("rotator")){
        localStorage.removeItem('btn');
        $("#box").removeClass("rotator");
    } else {
        localStorage.setItem('btn', 'rotator');
        $("#box").addClass("rotator");
    }
})

并在另一页中检查它是否已旋转

    if (localStorage.getItem('btn') === 'rotator'){
        $("#box").addClass("rotator");
    } else {
        $("#box").removeClass("rotator");
    }

Answer 2

假设页面page01.php和page02.php上的div具有相同的id。

您可以使用Web Storage API在浏览时存储某些值，以便将来根据您的要求使用。在这里，我使用了sessionStorage。 sessionStorage对象仅存储一个会话的数据（关闭浏览器选项卡时将删除数据）。您可以使用localStorage属性存储数据，但没有到期日期。

第page01.php页

$(".btn-rotate").click(function() {
    if ($("#box").hasClass("rotator")) {
        $("#box").removeClass("rotator");
        sessionStorage.removeItem("hasClass");
    } else {
        $("#box").addClass("rotator");
        sessionStorage.setItem("hasClass", "yes");
    }
})

页面上的

02.php

if (sessionStorage.hasClass) {
    $("#box").addClass("rotator");
}

Answer 3

我的错误，我忘了把＃34; ===＆＃39; rotator＆＃39;。非常感谢你们，工作就像一个魅力！这是最终的代码：

page01.php：

    $(".btn-rotate").click(function(){
        if ($("#box").hasClass("rotator")){
           localStorage.removeItem('rotated');
            $("#box").removeClass("rotator");
        } else {
            $("#box").addClass("rotator");
             localStorage.setItem('rotated','rotator');               
        }
    })

Page 02.php：

get_localstorage();
function get_localstorage() {
        if (localStorage.getItem("rotated") === 'rotator'){
            $("#box").addClass("rotator");
        } 
  };

再次感谢!!!

使用帖子

3 个答案: