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页。

现在：

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

理想情况下我想要

当用户到达某个页面时（让我们称之为Page1），我希望他们必须至少点击一次Box 1或Box 2 - 然后再点击“转到第2页”＆＃ 39;按钮。如果他们没有 - 那么一个警告弹出窗口＆＃39;将出现在屏幕上告诉他们他们需要。我几乎不知道如何使用其他div进行编码。

如果有人能够帮我解决 ＆＃39;理想情况下我想要的＆＃39; 那将是非常棒的，但除此之外我会解决 ＆＃39;我目前正在尝试 。

我已经在JsFiddle页面上设置了所有内容，以便您可以看到我之后的内容。

Answer 1

The following code should work, showing the alert if clicked the first time, and redirecting to google after another click.

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

Answer 2

您需要更改else代码。

您可以在点击时绑定新事件，但不要触发点击。您只需更改警告弹出窗口的display属性，而不必在click事件上绑定它。

一个简单的解决方法：

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

Answer 3

当计数不大于1时，你基本上是在onclick事件中注册一个新函数。解决方案应该是

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

Answer 4

这就是我想要的。谷歌的链接不会工作，但这是因为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>

基于点击次数的不同事件

4 个答案: