Я разрабатываю блог, в котором посетитель может изменить цвет фона, нажав на одну из 5 кнопок.
$(function(){
//Verificando se já existe algum esquema de cor selecionado
var esquemaCor = parseInt(getCookie("cor_de_fundo"));
switch(esquemaCor){
case 1:
$('body').css('background-color','#0A0A0A');
break;
case 2:
$('body').css('background-color','#766777');
break;
case 3:
$('body').css('background-color','#EEE6EE');
break;
case 4:
$('body').css('background-color','#9F00A9');
break;
case 5:
$('body').css('background-color','#420668');
break;
default:
$('body').css('background-color','#9F00A9');
}
$('#cor_01').click(function(){
setCookie('cor_de_fundo', 1);
$('body').css('background-color','#0A0A0A');
});
$('#cor_02').click(function(){
setCookie('cor_de_fundo', 2);
$('body').css('background-color','#766777');
});
$('#cor_03').click(function(){
setCookie('cor_de_fundo', 3);
$('body').css('background-color','#EEE6EE');
});
$('#cor_04').click(function(){
setCookie('cor_de_fundo', 4);
$('body').css('background-color','#9F00A9');
});
$('#cor_05').click(function(){
setCookie('cor_de_fundo', 5);
$('body').css('background-color','#420668');
});
});
Стандартный цвет - фиолетовый блог.
background: # 9F00A9
Когда пользователь меняет цвет фона кнопки, работает отлично. Проблема заключается в том, что он перемещается между страницами блога. Перед зарядкой выбранного цвета, например, черный цвет фона сначала загружается после фиолетового на черный. (Возьмите тестовый блог: www.obovio.com.br) Как всегда носить первый цвет, который выбрал пользователь?
Скажите, что это ваш html
<body>
<script>
$( document ).ready(function() {
//by assigning this to a function you ensure the page has loaded and it exists before you call it too early
backgroundColour(getCookie("cor_de_fundo"));
});
</script>
</body>
И это ваша новая функция: function backgroundColour (cookie) {
//Verificando se já existe algum esquema de cor selecionado
var esquemaCor = parseInt(cookie);
//This way there is never a risk of auto-default unless the cookie is empty, but this is option, can probably keep using default anyway
if(!esquemaCor) {
$('body').css('background-color','#9F00A9');
}
else {
switch(esquemaCor){
case 1:
$('body').css('background-color','#0A0A0A');
break;
case 2:
$('body').css('background-color','#766777');
break;
case 3:
$('body').css('background-color','#EEE6EE');
break;
case 4:
$('body').css('background-color','#9F00A9');
break;
case 5:
$('body').css('background-color','#420668');
break;
}
$('#cor_01').click(function(){
setCookie('cor_de_fundo', 1);
$('body').css('background-color','#0A0A0A');
});
$('#cor_02').click(function(){
setCookie('cor_de_fundo', 2);
$('body').css('background-color','#766777');
});
$('#cor_03').click(function(){
setCookie('cor_de_fundo', 3);
$('body').css('background-color','#EEE6EE');
});
$('#cor_04').click(function(){
setCookie('cor_de_fundo', 4);
$('body').css('background-color','#9F00A9');
});
$('#cor_05').click(function(){
setCookie('cor_de_fundo', 5);
$('body').css('background-color','#420668');
});
});
Изменение: изменение моего ответа, потому что я только что понял, что ваш фон установлен отдельно от фонового цвета.
Почему бы вам просто не поместить это в свой собственный тег (ниже таблицы стилей):
<script>
if (getCookie("cor_de_fundo")) {
$('body').css('background','url("http://4.bp.blogspot.com/-SZodpKgdjwk/UkCj20gd4XI/AAAAAAAADZk/tIAmBbkoecU/s1600/square_bg.png") repeat');
}
</script>
Таким образом, если cookie установлен, вы получаете свои точки, но вы теряете этот фиолетовый цвет. Так эта проблема никогда не возникает?
Похоже, ваша логика может быть неправильной.
Вы говорите: "Наденьте фиолетовый фон с точками. Если есть куки, поставьте фоновый цвет на фоне с точками.
Вместо этого, почему бы вам не сказать "если есть куки файл, помещенный в цвет фона с точками, если нет куки файла, поставьте в цвет фона фиолетовый с точками".
На данный момент вы говорите: "установите фон для URL с фиолетовым цветом, тогда, если есть cookie, измените цвет"
Как и у вас, $(foo)
(где foo
- это функция) означает "дождитесь загрузки документа перед вызовом foo
". Если вы этого не сделаете, вы не можете гарантировать, что ваши HTMLElements существуют. Однако, если вы переместите вызов в <script>
который находится после/дочернего узла узла, вы должны быть уверены, что он будет существовать к моменту запуска кода.
Например, поскольку ваша функция использует только элемент <body>
, дайте ему имя foo, а затем выполните
<body>
<script type="text/javascript">
foo();
</script>
<!-- rest of body contents -->
</body>
Это будет означать, что он вызывается как можно скорее, в то время, когда можно с уверенностью предположить, что он не throw
ошибку.
Вы пытались использовать localstorage для сохранения цвета фона
$(function(){
if(localStorage.bgcolor==undefined)
localStorage.bgcolor="white" //default color that appears first time
$('body').css('background-color',localStorage.bgcolor);
$('#cor_01').click(function(){
localStorage.bgcolor = "#0A0A0A";
$('body').css('background-color',localStorage.bgcolor);
});
$('#cor_02').click(function(){
localStorage.bgcolor = "#766777"
$('body').css('background-color',localStorage.bgcolor);
});
// similar code for other buttons
});
Похоже, вы хотите историю api, чтобы предотвратить загрузку всей страницы снова? http://diveintohtml5.info/history.html
Эти примеры не требуют перезагрузки страницы: http://diveintohtml5.info/examples/history/casey.html
$(document).ready(handler)
эквивалентен$(handler)
- api.jquery.com/ready