jQuery - меняйте класс по клику и запоминайте через cookie

Question

Привет, ребята.Я пытаюсь настроить страницу, где, если вы нажмете на ссылку, класс изменится.Еще один шаг - это должно быть сохранено в куки.Каждый тег A имеет уникальный идентификатор.

Например, ниже приведен пример ссылки:

<a href="#" id="unique1" class="up">Link text</a>

Когда пользователь щелкает ссылку, класс необходимо изменить на «вниз».И печенье должно быть сохранено в течение одной недели, помня этот клик.Любые будущие посещения этой страницы должны будут ссылаться на cookie и соответственно устанавливать класс, если ссылка была нажата ранее.

Мои знания по javascript и jQuery минимальны .. это чуть выше моей головы.Любое предложение о том, как сделать эту работу?

Answer 1

Я бы использовал этот плагин для этого:

http://code.google.com/p/cookies/

Код может быть что-то вроде:

    // set default options
    // expires date
    var $todayDate = new Date();
    var $expireDate = ($todayDate.getDate() + 7) + '/' + $todayDate.getMonth() + '/' + $todayDate.getFullYear();

        $.cookies.setOptions({
            expiresAt: $expireDate;
            });


    // click functionality
        $('#unique1').click(function(){

           var $this = $(this);

           $this.removeClass('up').addClass('down');

           var $thisClass = $this.attr("class");

           $.cookies.set('ckClass', $thisClass);

           return false;

        });

Чтобы проверить значение cookie и убедиться, что класс присутствует, используйте что-то вроде:

var $ckVal = $.cookies.get('ckClass');
    if ($ckVal) {
        if ($ckVal == 'up') {
            $('#unique1').attr('class', '').addClass('up');
        } else {
            $('#unique1').attr('class', '').addClass('down');}
    }

Answer 2

Конечно, вы можете изменить класс на «вниз» одним кликом. Прочтите немного об этом.По сути, вы захотите установить уникальный идентификатор в виде массива / списка их внутри cookie.Затем при загрузке страницы сделайте это.

// list = ['#unique1', '#unique2' ... '#unique-n'];
for(var id in list)
{
    $(id).removeClass("up").addClass("down");
}