Cookie弹窗拒绝按钮失效问题求助：仅接受按钮可正常触发功能

我帮你捋了下代码，核心问题出在拒绝按钮的逻辑判断写反了，还有几个小细节可以优化，下面一步步拆解：

核心问题：逻辑分支颠倒 #

看你写的declineBtn点击事件代码：

declineBtn.onclick = ()=>{
  console.log("declinebtn");
  document.cookie = "CookieBy=SparkleHeart; max-age="+60*60*24*30;
  if(document.cookie){
    //if cookie is set
  }else{
    //if cookie not set then alert an error
    cookieBox.classList.add("hide"); //hide cookie box
  }
}

这里的逻辑完全搞反了：你把「隐藏弹窗」的代码放在了Cookie设置失败的分支里，但正常情况下Cookie设置都会成功，所以永远不会触发隐藏操作，自然看不到按钮的响应效果。

额外优化点 #

• 接受和拒绝按钮的Cookie值可以区分开（比如拒绝时设为CookieBy=Declined），方便后续判断用户的选择；
• 用includes()替代indexOf()检查Cookie，代码可读性更强；
• 初始检查Cookie时，要同时判断接受和拒绝两种状态，避免用户拒绝后弹窗反复出现。

修复后的完整代码 #

JavaScript部分 #

if ( $('.cookie-wrapper').length > 0 ) {
  const cookieBox = document.querySelector(".cookie-wrapper"),
        acceptBtn = cookieBox.querySelector("button"),
        declineBtn = document.querySelector(".decline");
  
  // 修复拒绝按钮逻辑
  declineBtn.onclick = ()=>{
    console.log("declinebtn clicked");
    // 设置标记为"拒绝"的Cookie
    document.cookie = "CookieBy=Declined; max-age="+60*60*24*30;
    if(document.cookie.includes("CookieBy=Declined")){
      cookieBox.classList.add("hide"); // 成功设置后隐藏弹窗
    }else{
      alert("Cookie无法设置！请在浏览器Cookie设置中解除对本网站的限制。");
    }
  }
  
  acceptBtn.onclick = ()=>{
    document.cookie = "CookieBy=SparkleHeart; max-age="+60*60*24*30;
    if(document.cookie.includes("CookieBy=SparkleHeart")){
      cookieBox.classList.add("hide");
    }else{
      alert("Cookie无法设置！请在浏览器Cookie设置中解除对本网站的限制。");
    }
  }
  
  // 初始检查用户是否已做出选择
  const hasAccepted = document.cookie.includes("CookieBy=SparkleHeart");
  const hasDeclined = document.cookie.includes("CookieBy=Declined");
  
  if(hasAccepted || hasDeclined){
    cookieBox.classList.add("hide");
  }else{
    cookieBox.classList.remove("hide");
  }
}

测试步骤 #

1. 打开浏览器控制台，清除当前网站的所有Cookie；
2. 刷新页面，点击「Noraidīt」按钮，现在能看到控制台输出declinebtn clicked，同时弹窗会正常隐藏；
3. 再次刷新页面，弹窗不会再出现，因为已记录用户的拒绝状态。

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