Question

我创建了一个投资组合网站，我浏览项目的方式是使用＆＃34; status＆＃34;。因此，例如，如果单击/滚动一次，项目1将显示。单击/滚动第二次，项目2将显示。等等。

<body onwheel="switchprojects()"></body>

<div class="explore-box" onClick="switchprojects()"></div>

projectStatus = 1;

function switchprojects() {
if(projectStatus==1) {
$('#bona').removeClass('float');
$('#peak').addClass('float');
projectStatus = 2;
}
else if(projectStatus==2) {
    $('#peak').removeClass('float');
    $('#trap').addClass('float');
    projectStatus = 3;
}
else if(projectStatus==3) {
    $('#trap').removeClass('float');
    $('#fp').addClass('float');
    projectStatus = 4;
}
else if(projectStatus==4) {
    $('#fp').removeClass('float');
    $('#bona').addClass('float');
    projectStatus = 1;
}
}

如你所见，我有两个独立的元素，一个用于滚动，另一个用于点击。它到目前为止工作得很好，但我遇到了一个问题 - 状态不会在两个元素之间更新。例如，如果我在主体中滚动两次，则可点击div上的相同功能不会更新其状态。有谁知道如何解决这个问题？

谢谢！

https://codepen.io/anon/pen/qozoKj这是代码笔。

更新：我不确定原因，但是当我将代码上传到codepen时，似乎已经更新了点击状态....但现在键盘上的每个键都会激活css更改。我很困惑。

Answer 1

所有密钥触发switchprojects()的原因是因为onkeydown="switchprojects()"上有<body>。

未收听点击的原因是<div class="explore-box">没有设置高度或宽度，尽管position: absolute。 Mabey你应该考虑将点击事件更改为<div class="section"> CodePen

Answer 2

尝试类似

的内容

	$(function(){
		$('#bona').addClass('float');
	});

	projectStatus = 1;

	function switchprojects() {
		if(projectStatus==1) {
		$('#bona').removeClass('float');
		$('#peak').addClass('float');
		projectStatus = 2;
	}else if(projectStatus==2) {
		$('#peak').removeClass('float');
		$('#trap').addClass('float');
		projectStatus = 3;
	}else if(projectStatus==3) {
		$('#trap').removeClass('float');
		$('#fp').addClass('float');
		projectStatus = 4;
	}else if(projectStatus==4) {
		$('#fp').removeClass('float');
		$('#bona').addClass('float');
		projectStatus = 1;
	}
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.section {
	width: 100%;
	height: 100vh;
	position: relative;
}
h1 {
	color: white;
	font-family: 'league';
	font-size: 8vw;
	position: absolute;
	text-align: center;
	line-height: 100vh;
	width: 100%;
	font-weight: 100;
	margin: 0;
	padding: 0;
	transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
	transition: 0s;
}
.float {
	transform: translate(0)!important;
	transition: transform 1s;
	transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
	opacity: 1!important;
}
.explore-box {
	position: absolute;
	margin-left: 55%;
	margin-top: 70vh;
}
.explore-line {
	background-color: white;
	width: 70px;
	height: 1px;
	position: relative;
	float: left;
	margin-top: 9pt;
	margin-right: 7pt;
	transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
	transition: 0.4s;
}
.explore-wrap {
	overflow: hidden;
	float: right;
}
.explore-wrap h2 {
	color: white;
	margin: 0;
	font-size: 14pt;
	transform: 1s ease;
}

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<body style="background-color: #141219;" onwheel="switchprojects()">
  <div class="section">
  <h1 id="bona" style="transform: translateY(10%); opacity: 0;">BONA COFFEE</h1>
			<h1 id="peak" style="transform: translateY(10%); opacity: 0;">PEAK EXPLORATIONS</h1>
			<h1 id="trap" style="transform: translateY(10%); opacity: 0;">TRAP MAGAZINE</h1>
			<h1 id="fp" style="transform: translateY(10%); opacity: 0;">FIELD & PANTRY</h1>
    
    
    <div class="explore-box" onClick="switchprojects()">
			<div class="explore-line"></div>
			<div class="explore-wrap">
				<h2>View</h2>
			</div>
			<br>
			<div class="explore-wrap" style="position: absolute; right: 0;">
				<h2>Project</h2>
			</div>
		</div>
  </div>
</body>

正如您所说，我已在查看项目而非正文

上添加了点击事件

更新＆＃34;状态（）＆＃34;

2 个答案: