只有当cookie存在时才添加addClass，否则隐藏

addClass only if cookie exists else hide

本文关键字：addClass 隐藏 添加 cookie 存在      更新时间：2023-09-26

我试图使一个投票系统，将检查当用户投票，然后改变html项目css从"投票"到"谢谢"和背景颜色为"绿色"。

现在这工作得很好，但我需要使选项当用户刷新页面检查cookie是否存在(cookie已经设置=变量是voteCookie('id'))，然后应用class="存在"。如果它不存在，隐藏这个类。那个班级只会说"谢谢投票"，别无其他。

jQuery: 

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

您可以这样做(使用jQuery cookie插件可以使它更容易)，但这不是cookie的正确用例。每个HTTP请求都会从客户端发送cookie到服务器;如果你没有在每个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('voted')), setItem行改为$.cookie('voted', 'yes');

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

  • 我使用document而不是window和ready -文档只讨论document，而不是window。(也就是说，我通常不喜欢使用ready;相反，我只是确保脚本位于HTML的末尾，就在关闭</body>标记之前。

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

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

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

  • 当他们已经投票时，我添加了相同的类。

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

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

相关文章：