Установить тело класса с JQuery плагин печенье

Я пытаюсь создать «HighContrast» переключатель стиля с jQuery Cookie plugin Установить тело класса с JQuery плагин печенье

Я в настоящее время разоряя мою голову за пару часов, прочитал много вопросов на stackoverflow.com , но я не решил свою проблему.

Идея заключается в том, чтобы переключать класс «с высоким контентом» на тег тела при нажатии на элемент span с «переключателем» id. Внутри таблицы стилей CSS У меня есть набор правил, которые я хочу применить, если тег body имеет класс «highcontrast».

Это JQuery код выше сценария:

$("#switch").click(function() { 
    $.cookie('bodyclass', 'highcontrast', { expires: 7, path: '/' }); 
    $('body').toggleClass('highcontrast'); 
});

Если нажать на переключатель класса элемент тела переключается. Теперь, если вы перейдете на другую страницу, файл cookie существует, и значение установлено, но класс body «highcontrast» больше не присутствует.

Что мне счесть?

источник

2013-02-25 weezle

Можете ли вы показать код, в котором вы читаете значение cookie, и установить класс на теле при загрузке страницы? – Strille

ваш toggleClass работает над кликом в соответствии с кодом, поэтому переход на другую страницу не приведет к автоматическому нажатию кнопки.! –

Отсутствует код для чтения cookie при загрузке страницы, и если он существует, изменить класс body – charlietfl

Хорошо, это проверено и работает ...

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Style Switcher</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="../../plugins/cookie/jquery.cookie.js"></script> 
<script src="switch.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 

<span id="switch">Switch</span> 

</body> 
</html>

JQuery:

$(document).ready(function(){ 
     // Check (onLoad) if the cookie is there and set the class if it is 
     if ($.cookie('highcontrast') == "yes") { 
      $("body").addClass("highcontrast"); 
     } 

     // When the span is clicked 
     $("#switch").click(function() { 
      // Check the current cookie value 
      // If the cookie is empty or set to no, then add highcontrast 
      if ($.cookie('highcontrast') == "undefined" || $.cookie('highcontrast') == "no") { 
       // Set cookie value to yes 
       $.cookie('highcontrast','yes', {expires: 7, path: '/'}); 
       // Add the class to the body 
       $("body").addClass("highcontrast"); 
      } 
      // If the cookie was already set to yes then remove it 
      else { 
       $.cookie('highcontrast','no', {expires: 7, path: '/'}); 
       $("body").removeClass("highcontrast"); 
      } 
     }); 
    });

CSS:

body { 
     width:100%; 
     height:100%; 
    } 
    body.highcontrast { 
     background-color:#000; 
     color:#fff; 
    }

источник

2013-02-25 12:33:01 derekmx271

Я протестировал ваше решение и, похоже, отлично работает. Спасибо! – weezle

Добро пожаловать. Его можно было бы очистить некоторыми переменными, но это основная идея ... Наслаждайтесь! – derekmx271

Я бы посмотрел документацию плагина, чтобы увидеть, нужно ли исключать значение «expires» из события click (если файл cookie уже существует) ... вы можете использовать панель «Inspect» Google Chrome для просмотра файлов cookie (щелкните правой кнопкой мыши) «Осмотреть элемент»> «Ресурсы»> «Куки») и проверить, будет ли срок истечения срока действия установленным до семи дней каждый раз, когда вы нажимаете на диапазон. (Вы можете или не хотите, чтобы это произошло). – derekmx271

попробовать что-то вроде этого, на вашей странице загрузки:

if ($.cookie('bodyclass')) { 
    $('body').toggleClass('highcontrast'); 
}

источник

2013-02-25 11:54:37

Вы должны установить значение highcontrast в зависимости от того, что пользователь хочет, и прочитать его на странице загрузки.

// switch cookie 
$("#switch").click(function() { 

    // check current cookie 
    var current = $.cookie('highcontrast'); 

    // set new cookie and adjust contrast 
    if (current) { 

     // remove cookie 
     $.cookie('highcontrast', null); 

     // remove class 
     $('body').removeClass('highcontrast'); 

    } else { 

     // add cookie 
     $.cookie('highcontrast', 1, { expires: 7, path: '/' }); 

     // add class 
     $('body').addClass('highcontrast'); 
    } 

}); 

// set contrast on page load 
$(function() { 

    var value = $.cookie('highcontrast'); 

    if (value) { 

     // add contrast class 
     $('body').addClass('highcontrast'); 

    } 

});

источник

2013-02-25 11:55:46 sjdaws

Я пробовал ваше решение, но проблема была в следующем: Если вы нажмете на элемент #switch для второго раза (в первый раз вы устанавливаете класс body в "highcontrast" »), класс тела удаляется, но, вероятно, в этом случае cookie также должен быть удален, потому что когда вы переходите на другую страницу, класс тела снова появляется. – weezle

На document.ready проверки для печенья заранее и значения устанавливаются, если его присутствует, то добавить его к телу.

Пример

$(document).ready(function(){ 
    if($.cookie('bodyclass')) 
    { 
     $('body').addClass($.cookie('bodyclass')); 
    } 
});

источник

2013-02-25 11:56:55

Установить тело класса с JQuery плагин печенье

ответ

Смежные вопросы