Question

大家好，很抱歉这个问题，但我不是javascript专家。

我正在尝试将Cookie提示框添加到我的网站，我想在用户点击按钮时以及在50像素后滚动页面时设置Cookie。我写了这两个函数，但我无法理解如何链接它们！

$(document).ready( function(){
  $('.cookies-eu-ok').click(function(e){
    e.preventDefault();
    $.cookie('cookie_eu_consented', 'true', { path: '/', expires: 365 });
    $('.cookies-eu').remove();
  });
});

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    e.preventDefault();
    $.cookie('cookie_eu_consented', 'true', { path: '/', expires: 365 });
    $('.cookies-eu').remove();
  }
});

Answer 1

这是你可以做的：

var setCookie = function() {
    $.cookie('cookie_eu_consented', 'true', {
        path: '/',
        expires: 365
    });
    $('.cookies-eu').remove();
};

var $document = $(document); // Caching
$document.ready(function() {
    $('.cookies-eu-ok').on('click', function(e) {
        e.preventDefault();
        setCookie();
    });
});

// Run only once until cookie is set
$document.on('scroll', function(e) {
    if ($document.scrollTop() >= 50) {
        e.preventDefault();
        setCookie();
        $document.off('scroll');
    }
});

为常用功能创建单独的功能
在相同元素上链接事件
缓存$(document)
使用on代替click。 Click在

on

Answer 2

您可以创建一个可以在处理程序之间共享的功能（为简单起见，DRY等），如下所示：

function saveConsentCookie () {
    $.cookie('cookie_eu_consented', 'true', { path: '/', expires: 365 });
    $('.cookies-eu').remove();
}

您可以为这两个事件设置处理程序：

$(document).on({
    ready: function () {
        $('.cookies-eu-ok').click(function (e) {
            saveConsentCookie();
            e.preventDefault();
        })
    },
    scroll: function scrollCheck () {
        if ($(this).scrollTop() >= 50) {
            saveConsentCookie();
            $(this).off('scroll', scrollCheck);
        }
    }
});

请注意，scroll处理程序函数具有名称（scrollCheck），以便在完成其工作后可以将其删除。如果没有这个，您的页面将检查是否需要永久设置cookie ...

聚合两个javascript事件函数

2 个答案: