为什么我的 cookie 弹出按钮不起作用?
2021-05-09
503
我为我的索引页制作了一个 cookie 弹出窗口,但 html 和 js 看起来正确并且应该可以工作,但不知何故只有橙色按钮可以接受 cookie,当我单击按钮“Noraidīt”时它必须消失但它不执行任何操作,甚至控制台也不会记录消息。有人可以帮忙吗?下面我为您提供代码。
if ( $('.cookie-wrapper').length > 0 ) {
const cookieBox = document.querySelector(".cookie-wrapper"),
acceptBtn = cookieBox.querySelector("button"),
declineBtn = document.querySelector(".decline");
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
}
}
acceptBtn.onclick = ()=>{
//setting cookie for 1 month, after one month it'll be expired automatically
document.cookie = "CookieBy=SparkleHeart; max-age="+60*60*24*30;
if(document.cookie){ //if cookie is set
cookieBox.classList.add("hide"); //hide cookie box
}else{ //if cookie not set then alert an error
alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser.");
}
}
let checkCookie = document.cookie.indexOf("CookieBy=SparkleHeart"); //checking our cookie
//if cookie is set then hide the cookie box else show it
checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide");
}
.cookie-wrapper{
position: fixed;
top: auto;
bottom: -5px;
margin-left: auto;
margin-right: auto;
left: 20px;
right: 20px;
max-width: 818px;
background: #2F4858;
border-radius: 8px;
z-index: 3;
}
.cookie-wrapper.hide{
opacity: 0;
pointer-events: none;
transform: scale(0.8);
transition: all 0.3s ease;
}
::selection{
color: #fff;
background: #FCBA7F;
}
.cookie-content{
display: flex;
padding: 32px 46px 28px 32px;
font-size: 14px;
color: #fff;
font-family: montserrat-regular;
line-height: 17px;
}
.cookie-content p{
font-weight: 400;
line-height: 17px;
text-align: left;
margin-right: 56px;
align-self: center;
}
.cookie-content p a{
font-weight: 700;
text-decoration: none;
color: #fff;
}
.cookie-content .buttons{
display: flex;
align-items: center;
justify-content: center;
}
.buttons button{
backface-visibility: hidden;
outline: none;
border: none;
position: relative;
height: 34px;
cursor: pointer;
display: inline-block;
white-space: nowrap;
background: #ffa800;
border-radius: 50.33px;
color: #fff;
font-size: 14px;
font-family: montserrat-regular;
font-weight: 400;
font-style: normal;
text-align: center;
vertical-align: middle;
line-height: 34px;
width: 131px;
}
.buttons .item:last-child {
background: #fff;
color: #2F4858;
margin-left: 32px;
}
.buttons button:hover{
transform: scale(0.97);
}
.buttons a{
color: #FCBA7F;
}
@media (max-width: 680px) {
.cookie-content .buttons {
flex-direction: column;
}
.buttons .item:last-child {
margin-left: 0;
margin-top: 10px;
}
}
@media (max-width: 500px) {
.cookie-content {
font-size: 12px;
padding: 12px;
}
.cookie-content p {
margin-right: 15px;
}
.buttons button {
font-size: 12px;
height: 30px;
line-height: 30px;
width: 100px;
}
}
<div class="cookie-wrapper">
<div class="cookie-content">
<p>Mēs apkopojam un apstradājām Jūsu personisko informāciju šādiem mērķiem: Analīze.<a href="https://automattic.com/cookies/"> Uzzināt vairāk</a></p>
<div class="buttons">
<button class="item">Apstriprināt</button>
<button class="item decline">Noraidīt</button>
</div>
</div>
</div>
1个回答
@blqk,我在 Codepen.io 上试过你的代码,但效果很好,甚至控制台都记录了消息“declinebtn”。检查这个网址。“https://codepen.io/devbluesky111/pen/NWpqjzV?editors=1111” 但是当我执行你的代码时,我刚刚添加了 jQuery CDN。即“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”
2021-05-09