更新“ status（）”

Question

我正在创建一个投资组合网站，而在项目中浏览的方式是使用“状态”。 因此，例如，如果单击/滚动一次，项目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时，它似乎已经更新了单击状态。...但是现在键盘上的每个键都可以激活CSS更改。 我很困惑

Answer 1

所有键都触发switchprojects()的原因是，您在<body>上具有onkeydown="switchprojects()" 。

没有听点击的原因是，尽管<div class="explore-box">的position: absolute ，但没有设置高度或宽度。 也许您应该考虑将click事件更改为<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>

如您所说，我在View Projects而非body上添加了click事件

更新“ status（）”

问题描述

2 个解决方案

解决方案1
0 2018-04-15 05:12:23

解决方案2
0 2018-04-15 05:15:43

更新“ status（）”

问题描述

2 个解决方案

解决方案1 0 2018-04-15 05:12:23

解决方案2 0 2018-04-15 05:15:43

解决方案1
0 2018-04-15 05:12:23

解决方案2
0 2018-04-15 05:15:43