我對 JavaScript 不太熟悉，我正在嘗試為 Square Space 網站設置年齡驗證彈出窗口。我在使用“是/否”按鈕功能時遇到問題，并且不知道如何使它們工作。這個想法是，當單擊“是”時，彈出窗口就會消失，并且該選擇將在該會話的其余部分中被記住。單擊“否”后，該站點將退出。任何幫助是極大的贊賞。我將以下代碼粘貼到站點范圍的標頭代碼注入中：jQuery(document).ready(function($) { if (sessionStorage.getItem('advertOnce') !== 'true') { //sessionStorage.setItem('advertOnce','true'); $('.box').show(); } else { $('.box').hide(); }; $('#btn-alpha').click(function() { sessionStorage.setItem('advertOnce', 'true'); $('.box').hide(); }); $('#btn-beta').click(function() { window.location.href = 'http://google.com/'; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><main> <article class="box"> <div class="box-left"> </div> <div class="box-right"> <h3>Age Verification</h3> <p>This site requires you to be 21 years or older to enter. </p> <p>By clicking 'YES', I certify that I am 21 years or older.</p> <a href="#" class="btn btn-alpha" id="refresh-page">YES</a> <a href="#" class="btn btn-beta" id="refresh-page">NO</a> </div> </article> <div class="overlay-verify"></div></main>
3 回答
慕的地8271018
TA貢獻1796條經驗 獲得超4個贊
您將按鈕類定位為 JavaScript 中的 id。將這兩行中的#a替換為：.
$('#btn-alpha').click(function() { // $('.btn-alpha')
和
$('#btn-beta').click(function() { // $('.btn-beta')
它現在應該可以工作了，盡管這兩個按鈕也具有id與評論中提到的相同的功能。Id 必須是唯一的，因此頁面上最多有一個元素具有特定的 id。
這是更正后的代碼（我用 sessionStorage 注釋掉了部分）：
jQuery(document).ready(function($) {
/*
if (sessionStorage.getItem('advertOnce') !== 'true') {
//sessionStorage.setItem('advertOnce','true');
} else {
$('.box').hide();
};
*/
$('.box').show();
$('.btn-alpha').click(function() {
//sessionStorage.setItem('advertOnce', 'true');
$('.box').hide();
});
$('.btn-beta').click(function() {
window.location.href = 'http://google.com/';
});
});
/*----------------------------------------------
-Defualt to border-box
----------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-family: helvetica;
font-size: 100%;
margin: 0;
padding: 0;
font-weight: 400;
font-family: Raleway;
line-height: 1.4;
}
/*----------------------------------------------
--Fluid body sizing
----------------------------------------------- */
body {
font-size: 100%;
}
@media (min-width: 32em) {
body {
font-size: 110%;
}
}
@media (min-width: 54em) {
body {
font-size: 111%;
}
}
@media (min-width: 74em) {
body {
font-size: 115%;
}
}
@media (min-width: 96em) {
body {
font-size: 135%;
}
}
a.btn {
background-color: #e3c827;
color: #000;
text-decoration: none;
display: inline-block;
letter-spacing: 0.1em;
padding: 0.5em 0em;
}
a.btn.btn-beta {
background-color: #800000;
}
.overlay-verify {
background: #000;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.box {
background: #fff;
position: relative;
left: 0;
right: 0;
top: 20%;
bottom: 0;
margin: 0 auto;
z-index: 9;
width: 70%;
height: 40%;
display: table;
}
.box .box-left,
.box .box-right {
width: 100%;
position: relative;
text-align: center;
padding: 5%;
}
@media (min-width: 54em) {
.box .box-left,
.box .box-right {
display: table-cell;
vertical-align: middle;
width: 50%;
}
}
.box .box-left p,
.box .box-right p {
position: relative;
z-index: 3;
}
.box .box-left {
background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
background-size: cover;
}
.box .box-left img {
position: relative;
z-index: 1;
width: 9em;
}
.box .box-left:after {
content: '';
position: relative;
z-index: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
.box .box-right {
background-color: #000000;
text-align: center;
}
.box .box-right h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid #eee;
padding-bottom: 1em;
margin: 0 auto;
}
.box .box-right p {
color: #fff;
}
.box .box-right small {
color: #fff;
}
.box .box-right .btn {
font-weight: 600;
letter-spacing: 0.2em;
padding: 0.9em 1em 0.7em;
margin: 1em auto;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main>
<article class="box">
<div class="box-left">
</div>
<div class="box-right">
<h3>Age Verification</h3>
<p>This site requires you to be 21 years or older to enter. </p>
<p>By clicking 'YES', I certify that I am 21 years or older.</p>
<a href="#" class="btn btn-alpha" id="refresh-page-yes">YES</a>
<a href="#" class="btn btn-beta" id="refresh-page-no">NO</a>
</div>
</article>
<div class="overlay-verify"></div>
</main>
郎朗坤
TA貢獻1921條經驗 獲得超9個贊
這是一個工作示例（堆棧片段可能不會保存 sessionStorage，因此請在此處查看：https: //jsfiddle.net/v358z1yt/
jQuery(document).ready(function($) {
if (sessionStorage.getItem('advertOnce') !== 'true') {
$('.box').show();
} else {
$('.box').hide();
};
$('.btn-alpha').click(function() {
sessionStorage.setItem('advertOnce', 'true');
$('.box').hide();
});
$('.btn-beta').click(function() {
window.location.href = 'http://google.com/';
});
});
/*----------------------------------------------
-Defualt to border-box
----------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-family: helvetica;
font-size: 100%;
margin: 0;
padding: 0;
font-weight: 400;
font-family: Raleway;
line-height: 1.4;
}
/*----------------------------------------------
--Fluid body sizing
----------------------------------------------- */
body {
font-size: 100%;
}
@media (min-width: 32em) {
body {
font-size: 110%;
}
}
@media (min-width: 54em) {
body {
font-size: 111%;
}
}
@media (min-width: 74em) {
body {
font-size: 115%;
}
}
@media (min-width: 96em) {
body {
font-size: 135%;
}
}
a.btn {
background-color: #e3c827;
color: #000;
text-decoration: none;
display: inline-block;
letter-spacing: 0.1em;
padding: 0.5em 0em;
}
a.btn.btn-beta {
background-color: #800000;
}
.overlay-verify {
background: #000;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.box {
background: #fff;
position: relative;
left: 0;
right: 0;
top: 20%;
bottom: 0;
margin: 0 auto;
z-index: 9;
width: 70%;
height: 40%;
display: table;
}
.box .box-left,
.box .box-right {
width: 100%;
position: relative;
text-align: center;
padding: 5%;
}
@media (min-width: 54em) {
.box .box-left,
.box .box-right {
display: table-cell;
vertical-align: middle;
width: 50%;
}
}
.box .box-left p,
.box .box-right p {
position: relative;
z-index: 3;
}
.box .box-left {
background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
background-size: cover;
}
.box .box-left img {
position: relative;
z-index: 1;
width: 9em;
}
.box .box-left:after {
content: '';
position: relative;
z-index: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
.box .box-right {
background-color: #000000;
text-align: center;
}
.box .box-right h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid #eee;
padding-bottom: 1em;
margin: 0 auto;
}
.box .box-right p {
color: #fff;
}
.box .box-right small {
color: #fff;
}
.box .box-right .btn {
font-weight: 600;
letter-spacing: 0.2em;
padding: 0.9em 1em 0.7em;
margin: 1em auto;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<article class="box">
<div class="box-left">
</div>
<div class="box-right">
<h3>Age Verification</h3>
<p>This site requires you to be 21 years or older to enter. </p>
<p>By clicking 'YES', I certify that I am 21 years or older.</p>
<a href="#" class="btn btn-alpha">YES</a>
<a href="#" class="btn btn-beta">NO</a>
</div>
</article>
<div class="overlay-verify"></div>
</main>
問題是您使用#btn-alphaand#btn-beta作為選擇器，但您需要使用類名。
另外，我從你的按鈕中刪除了重復的 ID。那是不行的。
RISEBY
TA貢獻1856條經驗 獲得超5個贊
將它們視為帶有“.”的類?而不是“#”似乎修復了“是”按鈕，但是，第二個按鈕不起作用。另一個問題的進一步研究（window.location.href 不起作用）讓我添加
return?false;
在 window.location.href 之后，但這仍然不起作用。想法？
jQuery(document).ready(function($) {
? if (sessionStorage.getItem('advertOnce') !== 'true') {
? ? $('.box').show();
? } else {
? ? $('.box').hide();
? };
? $('.btn-alpha').click(function() {
? ? sessionStorage.setItem('advertOnce', 'true');
? ? $('.box').hide();
? });
? $('.btn-beta').click(function() {
? ? window.location.;
return false;
? });
});
- 3 回答
- 0 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消