CSS стили, установленные jquery потерял после кнопки назад - PullRequest
Новая
       6

CSS стили, установленные jquery потерял после кнопки назад

3 голосов
/ 30 марта 2012

Простой скрипт отображает цветовую палитру.Я использую jQuery.ready для его инициации.Когда я нажимаю на цвет, сценарий просто меняет класс поля, на которое нажали, чтобы на нем появился флажок.Он также помещает значение цвета в скрытое поле.

Теперь я нажимаю на панели навигации, чтобы перейти на другую страницу, а затем нажимаю кнопку "Назад".Значение в скрытом поле все еще здесь.Но поле цвета больше не проверяется (firebug подтвердил, что класс здесь больше не существует).

Что я могу сделать, чтобы гарантировать, что класс, заданный динамически с помощью jquery, все еще здесь при возвращении на страницу?1008 *

(я пробовал это в последних FF и IE)

1 Ответ

2 голосов
/ 30 марта 2012

Вы не можете полагаться на браузер, чтобы поддерживать состояние вашего сайта.Когда вы используете кнопку «Назад» и значение скрытого поля все еще там, учтите, что extra , вы не можете получить такое же поведение с другими браузерами.

Это означает, что вы должны сохранять и поддерживатьвеб-сайт заявить о себе.Если вы используете ajax для навигации по своему веб-сайту, вы можете легко поддерживать состояние с помощью объекта, но поскольку это не так, решением может быть использование файлов cookie.

EDIT : HTML5 Web Storage также может быть альтернативным решением, применяется та же логика.

Следующий код W3Schools, взятый из http://www.w3schools.com/js/js_cookies.asp

Чтобы установить cookie 

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

Чтобы получить значение cookie 

function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name)
        {
            return unescape(y);
        }
    }
}

Таким образом, вы в основном устанавливаете cookie, когда пользователь выбирает цвет (используя setCookie()), и каждыйвремя загрузки страницы вы проверяете на значение cookie (используя getCookie()) и соответственно заполняете страницу.

Пример 

//User has chosen a color, save that in a cookie for 1 day
setCookie("selectedColor", "green", 1);

//Page is loaded, check for cookie value...
$(document).ready(function()
{
    //Get cookie value
    var selectedColor = getCookie("selectedColor");
    if(selectedColor != "")
    {
        //A color has been previously selected, add the CSS class accordingly
        $("#"+selectedColor).addClass("selected");
    }
});

РЕДАКТИРОВАТЬ: Сохранять состояние только при переходе с другого сайта (не только нажав кнопку назад).Перезагрузка очищает все.

Давайте предположим, что пользователь устанавливает цвет в page1.html, затем переходит к page2.html, а затем возвращается к page1.html.

В page1.html сохраняет выбранноезначение цвета в файле cookie, такое же, как и раньше. 

//User has chosen a color, save that in a cookie for 1 day
setCookie("selectedColor", "green", 1);

Но теперь, когда загружается page1.html, заполняйте страницу только возможным ранее выбранным значением, если для определенного файла cookie (поясненного ниже) установлено значениеtrue. 

//page1 is loaded
$(document).ready(function()
{
    //Only populate page if "populate" cookie is set to true
    if( getCookie("populate") != "true" )
    { return; //Stop }

    //Get cookie value
    var selectedColor = getCookie("selectedColor");
    if(selectedColor != "")
    {
        //A color has been previously selected, add the CSS class accordingly
        $("#"+selectedColor).addClass("selected");

        //Set "populate" cookie to false
        setCookie("populate", "false", 1);
    }
});

Теперь, в page2.html, сделайте следующее: 

//page2 is loaded
$(document).ready(function()
{
    //Set "populate" cookie to true
    setCookie("populate", "true", 1);
}

Это позволяет вам узнать, заходят ли посетители с другой страницы, когда они достигаютpage1.html.Имейте в виду, что если пользователь делает это ...

page1.html -> page2.html -> google.com -> page1.html

..значения все еще будут там.Перезагрузка page1.html очищает все.К сожалению, я не смогу предоставить вам примеры HTML5 Web Storage, поскольку я никогда не использовал его, но применение той же логики даст вам аналогичные результаты.

Надеюсь, это поможет.

...