如何通过cookie实现点击提交按钮后隐藏指定div元素？

问题原因 #

• 点击事件绑定逻辑错误：你直接将$.cookie()的执行结果传给了click()方法，而非回调函数，导致写cookie操作会在页面加载时直接执行，不会在点击按钮时触发
• 缺少DOM加载完成判断：脚本执行时如果对应DOM节点还未渲染完成，选择器操作会失效，类名增减不会生效
• 点击后未主动触发隐藏逻辑：原有代码仅在页面首次加载时判断cookie控制显隐，点击写cookie后需要刷新页面才会隐藏表单，体验不流畅
• 若你使用的是jQuery cookie插件，需确保页面已经正确引入该插件依赖

修正后的代码 #

依赖jQuery cookie插件的实现 #

// 所有逻辑包裹在DOM加载完成回调中，确保DOM节点已渲染
$(function() {
  // 页面加载时先判断cookie状态，控制表单显隐
  if ($.cookie('_dro')) {
    $('.formulario').addClass('hidden');
  } else {
    $('.formulario').removeClass('hidden');
  }

  // 绑定提交按钮点击事件
  $("#form_send").click(function(e) {
    // 如果是form表单内的提交按钮，需要阻止默认提交跳转行为
    e.preventDefault();
    // 写入7天有效期的cookie，添加path配置保证全站生效
    $.cookie('_dro', 'the_value', { expires: 7, path: '/' });
    // 写入完成后直接隐藏表单，无需刷新页面
    $('.formulario').addClass('hidden');
  });
})

无额外依赖的原生JS实现 #

如果不想引入jQuery cookie插件，可以直接用原生API操作cookie，逻辑完全一致：

// 原生写cookie方法
function setCookie(name,value,days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
// 原生读cookie方法
function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for(let i=0;i < ca.length;i++) {
    let 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;
}

// 业务逻辑
document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.formulario');
  const sendBtn = document.querySelector('#form_send');

  if (getCookie('_dro')) {
    form.classList.add('hidden');
  }

  sendBtn.addEventListener('click', function(e) {
    e.preventDefault();
    setCookie('_dro', 'the_value', 7);
    form.classList.add('hidden');
  });
});

内容的提问来源于stack exchange，提问作者Ssnov