jquery - 当按钮点击 6 次时设置 cookie 并禁用点击

Question

我试图限制点击六次的按钮，然后让它在 30 分钟内无法点击，即使你重新加载页面也必须禁用它，但是 30 分钟后再次显示按钮而不重新加载页面，这可能吗？我需要帮助。

这是代码：

(function(){
    var click_counter = 0;
    jQuery('.controls_next').on('click', function(event){
        event.preventDefault();
        var el = jQuery(this);
        click_counter += 1;
        if (!el.hasClass('')){
            // should be activated
        };
        if (click_counter >= 6){
            // deactivate
            el.addClass('disabled');
            var date = new Date();
            var minutes = 01;
            date.setTime(date.getTime() + (minutes * 60 * 1000));
            $.cookie("skipSongCookie", { expires: date });
        };
    });
})();

Answer 1

您可以设置 cookie 并更改值：

function setCookie(c_name, value, exdays)
{
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

Answer 2

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else
        var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1, c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

function checkCookie(name, days)
{
    var value = readCookie(name);
    if (value === null) {
        createCookie(name, 1, days);
    } else {
        value += 1;
        createCookie(name, value + 1, days)
    }
    return value;
}
$(function() {
    var name = 'cookie_name';
    var days = 365;
    $('.controls_next').click(function() {
        var click_counter = checkCookie(name, days);
        if(click_counter >= 6){
            $('.controls_next').attr('disabled', 'disabled');
            // or $('.controls_next').addClass('disabled');
        }

    });
});