Как я могу добавить И удалить классы в сочетании с настройкой И удалить куки с помощью Jquery - PullRequest
Новая
       60

Как я могу добавить И удалить классы в сочетании с настройкой И удалить куки с помощью Jquery

0 голосов
/ 22 июля 2011

Привет всем,
Я довольно новичок в этом, и я в пути над головой. Я постараюсь сохранить это коротким ...

У меня 2 х 3 кнопки. Пожалуйста, следуйте этой ссылке, чтобы увидеть их изображение. (я не могу опубликовать фотографии jet ...)
На рисунке верхний ряд кнопок - класс: hover, нижний стандарт. Все 6 кнопок имеют div и имеют стиль css (.black1 + .black1: hover) в сочетании с ними по классу.
(HTML): 

<div><a id="black" href="#" class="black1">Black</a></div>
<div><a id="black_day" href="#" class="gr_light_off"></a></div>
<div><a id="black_month" href="#" class="re_light_on"></a></div>
<div><a id="white" href="#" class="red1">White</a></div>
<div><a id="white_day" href="#" class="gr_light_off"></a></div>
<div><a id="white_month" href="#" class="re_light_on"></a></div>

В этом примере я добавил класс "re_light_on" для кнопок "black_month" и "white_month". Это делает свет включенным. (Этот класс никогда не должен быть в моем HTML-скрипте, как вы увидите.) Это означает, что я установил 2 класса (.._ light_off & .._ light_on) для кнопок «день» и «месяц», оба с их собственным наведением -стиль.

План:
Я дал тегу body идентификатор "body_bg". По умолчанию это класс "bg_gray". Когда кто-то нажимает кнопку «Черный», «body_bg» удаляет класс «bg_gray» и загружается класс «bg_black». Это работает так (HTML): 

<a id="black" href="#" onclick="$(body_bg).removeClass('bg_gray bg_white'),
$(body_bg).addClass('bg_black');">

Нажатие на кнопку «Белый» делает наоборот. (Там же есть кнопка «сбросить настройки по умолчанию»)
Вопрос 1: Как переместить вышеуказанный скрипт с моей HTML-страницы на мою внешнюю js-страницу? Если я могу добавить это на свою js-страницу, я могу попытаться добавить к этому функцию «cookie.set» и «cookie.del», чтобы люди могли видеть другую часть сайта с фоном тела, которым они выбран.

Теперь для остальных 4 кнопок. У меня они тоже работают, вот так (html): 

<a id="black_day" href="#" class="gr_light_off" onclick="
$(this).removeClass('gr_light_off'), $(white_day).removeClass(),
$(this).addClass('gr_light_on'), $(white_day).addClass('gr_light_off');"></a>

Это делает невозможным, чтобы обе "дневные" кнопки включали свет одновременно. Этот сценарий является противоположным для кнопки "white_day" и одинаковым ходом для обеих кнопок "month".
Вопрос 2: Тот же вопрос! Как мне заставить это работать с моей внешней js-страницы?
Я много пробовал, поверь мне, но я, по-видимому, недостаточно хорошо говорю на javascript.

В конце концов, мне бы хотелось, чтобы «черные» и «белые» кнопки установили cookie для этой сессии просмотра, «day» - кнопки cookie для оставшейся части этого дня (в основном для развлечения) и для «месяца» Кнопка-установить печенье на месяц. Файл cookie для просмотра не должен удалять, но должен превосходить файл cookie за день и месяц. И дневное печенье должно превосходить месячное печенье.
Следующее - одна из многих вещей, которые я попробовал. Просто так можно стрелять по нему;) 

$(document).ready(function() {
  $("#black_day").click(function() {
    $(this).removeClass('gr_light_off');
    $(this).addClass('gr_light_on');
    $(white_day).removeClass();
    $(white_day).addClass('gr_light_off');
    $.cookie.del("styleday");
    $.cookie.set("styleday", "black", { path: '/', expiresAt: 23:59 });
  });
});

Последний вопрос: У меня есть второй план с кнопками не 2 x 3, а 5 x 3, направляющими альтернативные таблицы стилей. Есть ли более простой способ сделать все это ???

Я благодарю вас за ваше время и усилия. Я знаю, что учусь на каждой сделанной мной ошибке и на каждом ответе, который ты можешь мне дать.

1 Ответ

0 голосов
/ 23 июля 2011

Я не уверен с вашим вопросом, но, возможно, это решение поможет

A1. 

$('.black1').live('click', function(){
  $('#body_bg').removeClass('bg_gray bg_white').addClass('bg_black');
});

A2 

$('.gr_light_off').live('click', function(){
  // remove all gr_light_on class on every button that has gr_light_on class
  $('.gr_light_on').removeClass('gr_light_on');
  // add gr_light_on to this button
  $(this).removeClass('gr_light_off').addClass('gr_light_on');

  // clear then set the cookies
  $.cookie.del("styleday");
  if($(this).is('#black_day')){
    $.cookie.set("styleday", "black", { path: '/', expiresAt: 23:59 });
  }
  else if($(this).is('#white_day')){
    // set cookie for white style
  }
});

$('.gr_light_on').live('click', function(){
  // opposite with gr_light_off
});

// repeat for re_light_off etc..

A3.см. A2.

...