addClass только в том случае, если cookie существует еще скрыть

Question

Я пытаюсь создать систему голосования, которая будет проверять, когда пользователь проголосовал, а затем изменить элемент html css с «Голосование» на «Спасибо» и цвет фона на «зеленый», ,

Теперь это отлично работает, но мне нужно сделать выбор, когда пользователь обновит страницу, чтобы проверить, существует ли файл cookie (cookie уже установлен = переменная является voteCookie ('id')), а затем применить класс = "существует ». Если он не существует, скройте этот класс. Этот класс сказал бы «Спасибо за голосование», больше ничего.

JQuery:

$(window).ready(function() { 
    var voteId = $('.gallery-item a'); 
    $(voteId).on('click', function() { 
     $(this).text('Thank you!'); 
     $(this).css('background-color', 'green');  
}); 
}); 

Answer 1

Вы можете сделать (это легче с печеньем плагин JQuery), но это не правильный вариант использования для печенья. Куки-файлы отправляются от клиента на сервер с каждым HTTP-запросом; если вы не используете эту информацию в каждом HTTP-запросе, это просто лишняя передача данных.

Рассмотрим локальное хранилище вместо этого, который поддерживается virtually all browsers, даже IE8:

$(document).ready(function() { 
    var voteLink = $('.gallery-item a'); 
    if (localStorage.getItem("voted")) { 
     voteLink.text('Thank you for voting').addClass('voted'); 
    } else { 
     voteLink.one('click', function() { 
      localStorage.setItem("voted", "yes"); 
      $(this).text('Thank you!'); 
      voteLink.addClass('voted'); 
      // If you wanted to do something with *just* the elements that weren't 
      // clicked, you could do: 
      // voteLink.not(this).addClass('unused-vote'); 
      // ...or similar 
     }); 
    } 
}); 

... но если вы хотите использовать печенье с печенья плагин JQuery, вы просто изменить getItem строку if ($.cookie('voted')) и setItem линия $.cookie('voted', 'yes');

Я сделал несколько изменений выше, а также:

• Я использовал document, а не window с ready - the documentation только говорит о document, а не window. (То есть, я вообще предпочитаю не использовать ready вообще,. Вместо этого, я просто обеспечить скрипты в конце HTML, непосредственно перед закрывающим </body> тега)

• Я назвал переменную voteLink, а не voteId так это объект jQuery, содержащий элемент a, а не идентификатор.

• Я изменил $(voteId) к voteLink, поскольку объект уже объект JQuery, нет необходимости передавать его через $() снова.

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

• Я добавил тот же класс, когда они уже голосовали.

• Я использовал one, а не on, чтобы мы удалили обработчик кликов при первом щелчке.

---

Очевидно, что это просто имеет код клиента. Я предполагаю, что есть часть сервера, которая проверяет голоса и т. Д. (Поскольку вы не можете доверять чему-либо, что клиент отправляет или хранит для вас).