Question

我试图建立一个投票系统来检查用户何时投票，然后更改html项目css来自＆＃34;投票＆＃34;到＃34;谢谢你＆＃34;并且背景颜色为＆＃34;绿色＆＃34;。

现在这很好用了，但我需要在用户刷新页面以检查cookie是否存在时做出选项（cookie已经设置=变量是voteCookie（＆＃39; id＆＃39;））然后应用类=＆＃34;存在＆＃34 ;.如果它不存在则隐藏该类。该课程会说＆＃34;感谢投票＆＃34;，没有别的。

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对象，无需再次通过$()。
我将直接样式操作更改为您添加的类，以便更好地分离逻辑和样式。
我在已经投票的时候加了同一个班级。
我使用的是one而不是on，因此我们会在第一次点击时删除点击处理程序。

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

addClass仅在cookie存在时才隐藏

1 个答案: