更新"status()“
我正在创建一个项目组合网站，我在项目中导航的方式是使用"status“。例如，如果你点击/滚动一次，项目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。
更新:我不知道为什么，但是当我上传我的代码到codepen时，它似乎已经更新了clicks....but的状态，现在我键盘上的每个键都激活了css更改。我很困惑。
回答 2
Stack Overflow用户
发布于 2018-04-15 13:12:24
所有键都触发switchprojects()的原因是因为您在<body>上有一个onkeydown="switchprojects()"。
没有听到点击的原因是，尽管<div class="explore-box">是position: absolute，但它没有设置高度或宽度。也许您应该考虑将单击事件更改为<div class="section"> CodePen
Stack Overflow用户
发布于 2018-04-15 13:15:44
试试像这样的东西
$(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>
正如您所说，我已经在视图项目上添加了单击事件，而不是body
https://stackoverflow.com/questions/49838213
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号