仅当 cookie 存在时 addClass 否则隐藏

Question

我正在尝试制作一个投票系统，该系统将检查用户何时投票，然后将 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');       
});
});

Answer 1

你可以做到这一点（使用 jQuery cookie 插件更容易），但这不是 cookie 的正确用例。每个 HTTP 请求都会从客户端向服务器发送 Cookie；如果您没有在每个 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
        });
    }
});

...但是如果您想使用 cookie，通过 jQuery cookie 插件，您只需将 getItem 行更改为 if ($.cookie('voted')) 并将 setItem 行更改为 $.cookie('voted', 'yes');

我在上面也做了一些其他的改变：

• 我使用document 而不是window 和ready - the documentation 只谈论document，而不是window。 （也就是说，我通常根本不喜欢使用 ready；相反，我只是确保脚本位于 HTML 的末尾，就在结束 </body> 标记之前。）

• 我将变量称为voteLink 而不是voteId，因为它是一个包含a 元素而不是ID 的jQuery 对象。

• 我将$(voteId)改为voteLink，因为对象已经是一个jQuery对象，不需要再次通过$()。

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

• 当他们已经投票时，我添加了同一个班级。

• 我使用one 而不是on，以便在第一次点击时删除点击处理程序。

---

显然，这只是客户端代码。我假设有一个服务器可以验证投票等（因为您不能信任客户端为您发送或存储的任何内容）。