javascript - 根据点击次数不同的事件

Question

我一直在努力让一些东西发挥作用:

https://jsfiddle.net/CreativeAU/ys12ed05/

warningbutton.onclick = function buttonClicks() {
count += 1;
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningbutton.onclick = function() {warningpopup.style.display = "block";}
}};

<小时/>

我目前正在尝试做什么

用户第一次单击“转到第 2 页”时，将出现警告弹出窗口。一旦他们关闭警告并再次单击按钮 - 就会将他们带到第 2 页。

现在:

• 第一次点击按钮时没有任何反应。
• 第二次点击时，每次点击按钮后 = 都会出现警告弹出窗口。

<小时/>

理想的是我想要的

当用户到达某个页面(我们称之为第 1 页)时，我希望他们在单击“转到第 2 页”按钮之前必须至少单击一次框 1 或框 2。如果他们还没有这样做，那么屏幕上会出现一个“警告弹出窗口”，告诉他们需要这样做。我几乎不知道如何使用其他 div 进行编码。

<小时/>

如果有人能够帮助我解决“理想的是我想要的”那就太棒了，但否则我会满足于'我目前正在尝试这样做'。

我已将其全部设置在 JsFiddle 页面上，以便您可以直观地看到我想要的内容。

Answer 1

我认为这就是你想要的。谷歌的链接不起作用，但这是因为 stackoverflow。

var counter = 0;
		$(document).ready(function(){
			$('#first').click(function(){
				counter++
			});
			$('#second').click(function(){
				counter++
			});
			$('#next-page').click(function(){
				if (counter >= 1) {
					window.location.href = "http://www.google.com.au";
				}else{
					$('#warning-popup').css("display", "block");
				}
			});
			$('#warning-popup').click(function(){
				$(this).css("display", "none");
			});	
		});

#wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

#first, #second, #next-page {
	text-align: center;
	vertical-align: middle;
	line-height: 125px;
	font-size: 25px;
	color: #FFF;
	margin: 10px;
}

#first, #second {
	display: inline-block;
	background-color: #189a3d;
	width: 125px;
	height: 125px;
}

#next-page {
	display: block;
	background-color: #2e82d0;
	width: 270px;
	height: 125px;
}

.overlay {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
	text-align: center;
	padding-top: 25px;
	font-size: 40px;
	color: #FFF;
}

#close {
    color: orange;
    float: right;
    font-size: 30px;
	text-decoration: underline;
	margin-top: -0.35em;	
}#wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

#first, #second, #next-page {
	text-align: center;
	vertical-align: middle;
	line-height: 125px;
	font-size: 25px;
	color: #FFF;
	margin: 10px;
}

#first, #second {
	display: inline-block;
	background-color: #189a3d;
	width: 125px;
	height: 125px;
}

#next-page {
	display: block;
	background-color: #2e82d0;
	width: 270px;
	height: 125px;
}

.overlay {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
	text-align: center;
	padding-top: 25px;
	font-size: 40px;
	color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

	  <div id="first">B1</div>
    	<div id="second">B2</div>

	  <div id="warning-popup" class="overlay">
       WARNING TEXT HERE
     </div>

     <div id="next-page">Go to Page 2</div>

</div>