javascript - 仅当 cookie 存在时才添加类，否则隐藏

Question

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

现在效果很好，但我需要在用户刷新页面时选择检查 cookie 是否存在(cookie 已设置 = 变量为 voteCookie('id'))，然后应用 class="exists".如果它不存在，则隐藏该类。那个类(class)只会说“感谢您投票”，除此之外别无其他。

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 的 jQuery 对象元素，而不是 ID。

• 我改变了$(voteId)至 voteLink因为该对象已经是一个 jQuery 对象，所以不需要通过 $() 传递它再次。

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

• 我在他们已经投票后添加了同一个类(class)。

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

---

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