Отправить класс на другую страницу с постом

Question

DIV одной страницы (например, page01.php) переворачивается на 180 ° при каждом нажатии определенной кнопки.Проще говоря, эта кнопка добавляет или удаляет класс (ротатор) в DIV (поворот на 180 °) каждый раз.

Когда я нажимаю другую кнопку, чтобы изменить страницу (на page02.php), мне нужно проверить,DIV в page01.php имеет или нет этот класс (ротатор), и если этот класс применяется, мне нужно отправить его в 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">

Это CSS Rotator:

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

Я думал использовать POST и GET для jQuery, но я действительно не знаю, как отправить информацию.

У кого-то может быть идея?

Спасибо!

Эктор

Answer 1

Предполагая, что у вас есть div с одинаковым id на обеих страницах page01.php и page02.php.

Вы можете использовать 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");
}

Answer 2

Моя ошибка, я забыл поставить "=== 'ротатор'. Большое спасибо, ребята, работает как шарм! Вот окончательный код:

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");
        } 
  };

Еще раз спасибо !!!

Answer 3

использовать локальное хранилище,

$(".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");
    }