使用 Post 将课程发送到另一个页面答案

【问题标题】：Send a Class to another page with Post使用 Post 将课程发送到另一个页面
【发布时间】：2024-01-23 12:49:01
【问题描述】：

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

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

这是 jQuery 中的按钮：

$(".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，但我真的不知道如何发送信息。

有人有想法吗？

谢谢！

赫克托

【问题讨论】：

嗨@Hector，你在两个页面上都有<div id="box" class="content-background bg-index">吗？

标签： php jquery ajax post get

【解决方案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");
    }

【讨论】：

大家好！我不知道那个替代方案！太感谢了。但不工作。我不知道我做错了什么。目前正在努力保存和擦除本地存储中的数据（我检查了开发人员工具并保存了值）。但是当我试图让它们在 Page02.php 中不起作用时。我这样做了： $(document).ready(function() { if (localStorage.getItem("btn")){ $("#box").addClass("rotator"); } });有什么线索吗？
page2 中是否有 ID 为 #box 的元素？

【解决方案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");
    }
})

在page02.php页面上

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

【讨论】：

【解决方案3】：

我的错误，我忘了输入“=== 'rotator'。非常感谢你们，就像一个魅力！这是最终代码：

page01.php:

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

02.php页：

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

再次感谢！！！

【讨论】：