Javascript 仅当cookie存在时添加类，否则隐藏

我正在尝试制作一个投票系统，该系统将检查用户何时投票，然后将html项目css从“投票”更改为“谢谢”，并将背景颜色更改为“绿色”

现在这很好，但我需要在用户刷新页面时做一个选项，检查cookie是否存在（cookie已设置=变量为voteCookie（'id'）），然后应用class=“exists”。如果不存在，则隐藏该类。那班学生会说“谢谢你的投票”，别的什么都不会说

jQuery：

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

您可以做到这一点（jquerycookie插件使之更容易），但它不是cookie的正确用例。Cookies随每个HTTP请求从客户端发送到服务器；如果您没有在每个HTTP请求上使用这些信息，那么这完全是不必要的数据传输

请考虑本地存储，即使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
        });
    }
});

…但是如果您想使用cookie，使用jQuery cookie插件，只需将

getItem

行更改为

if（$.cookie（'voated'））

，将

setItem

行更改为

$.cookie（'voated'，'yes'）

我在上面还做了一些其他更改：


我使用了
文档
而不是
窗口
和
就绪
——只谈论
文档
，而不是
窗口
。（也就是说，我通常不喜欢使用
ready
；相反，我只是确保脚本位于HTML的末尾，就在结束
标记之前。）

我调用变量
voteLink
而不是
voteId
，因为它是一个jQuery对象，包含
a
元素，而不是ID

我将
$（voteId）
更改为
voteLink
，因为该对象已经是jQuery对象，无需再次通过
$（）

为了更好地分离逻辑和样式，我将直接样式操作更改为您添加的类

当他们已经投票时，我加入了同一类

我在

上使用了

one

而不是

，因此我们在第一次单击时删除了click处理程序



显然，这只是客户端代码。我假设有一个服务器可以验证投票等等（因为你不能信任客户端为你发送或存储的任何东西）。
cookie代码在哪里？我在你的代码中看不到voteCookie（'id'）。它已经由该cookie id设置，因此没有必要在这里粘贴代码。太棒了，我会让你知道这对我来说是如何工作的。谢谢。现在发生的事情是因为“.gallery item a”对所有人都是一样的，每个投票选项都会改变。这就是我一直使用$（这个）的原因。@stormec:Doh，对不起，是的。但是您不需要
$（voteId）
，只需单击
中的
this
。我已经修好了。哦，糟糕，我以前没说过。每个用户只能投票三次。我现在该怎么做？@stormec:你做服务器端。你不能相信客户的任何东西。你是如何做到这一点的，远远超出了你最初提出的问题的范围。