更新“ status（）”
[英]Updating “status()”
问题描述
I'm creating a portfolio website and the way I'm navigating through projects is by using "status". 
我正在创建一个投资组合网站，而在项目中浏览的方式是使用“状态”。 So for instance, if you click/scroll once, project 1 will reveal. 因此，例如，如果单击/滚动一次，项目1将显示出来。 Click/scroll a second time, project 2 will reveal. 再次单击/滚动，将显示项目2。 So on so forth. 依此类推。
<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;
}
}
As you can see I have two separate elements, one for scrolling and one for clicking. 如您所见，我有两个单独的元素，一个用于滚动，另一个用于单击。 It's working great so far, but I'm running into one issue—the status does not update between the two elements. 到目前为止，它的运行情况很好，但是我遇到了一个问题-状态在这两个元素之间没有更新。 If I scroll twice in the body for example, the same function on the clickable div won't update its status. 例如，如果我在正文中滚动两次，则可点击div上的相同功能将不会更新其状态。 Does anyone know how to fix this? 有谁知道如何解决这一问题？
Thank you! 谢谢！
https://codepen.io/anon/pen/qozoKj Here's the codepen. https://codepen.io/anon/pen/qozoKj这是codepen。
UPDATE: I'm not sure why, but when I uploaded my code to codepen, it seems to have updated the status of the clicks....but now every key on my keyboard activates the css change. 更新：我不确定为什么，但是当我将代码上传到Codepen时，它似乎已经更新了单击状态。...但是现在键盘上的每个键都可以激活CSS更改。 I'm very confused. 我很困惑
2 个解决方案
解决方案1
0 2018-04-15 05:12:23
The reason all the keys are triggering switchprojects() is because you have an onkeydown="switchprojects()" on the <body> . 所有键都触发switchprojects()的原因是，您在<body>上具有onkeydown="switchprojects()" 。
The reason the clicks are not listened to is that the <div class="explore-box"> has no height or width set on it although its position: absolute . 没有听点击的原因是，尽管<div class="explore-box">的position: absolute ，但没有设置高度或宽度。 Mabey you should consider changing the click event to the <div class="section"> CodePen 也许您应该考虑将click事件更改为<div class="section"> CodePen
解决方案2
0 2018-04-15 05:15:43
Try something like 尝试类似
$(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>
As You say I have added the click event on View Projects instead of body 如您所说，我在View Projects而非body上添加了click事件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.