javascript - Javascript在按钮单击时运行2个函数,带有多个按钮和相同的类
问题描述
我有一个投资组合网格,其中包含每个网格项目中过去工作的屏幕截图。
当前在单击按钮时,它会调用一个函数来滚动屏幕截图并在到达图像底部时停止。
再次单击按钮后,我需要反转滚动。滚动由 setInterval 创建。我在单击时删除的按钮上有一类“向下”。
我有一个 if 语句无法检查“down”类是否存在并运行 scrollUp 函数。
这是一个 PHP 循环,因此有多个具有相同类的按钮。
我不能使用 jQuery。
谢谢你的帮助!
HTML:
<ul>
<li>
<div class="image-container overflow-hidden height-500">
<img class="item absolute pin-t w-full h-auto pin-l"
src="/image.jpg"/>
</div>
<button class="portScroll down">Scroll Down</button>
</li>
<li class="web-design-portfolio">
<div class="image-container overflow-hidden height-500">
<img class="item absolute pin-t w-full h-auto pin-l"
src="/image.jpg"/>
</div>
<button class="portScroll down">Scroll Down</button>
</li>
</ul>
JS:
function scrollDown() {
var portImg = this.parentNode.parentNode.querySelector('img.item');
var height = portImg.clientHeight;
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == height - 500) {
clearInterval(id);
} else {
pos++;
portImg.style.top = - + pos + 'px';
}
}
for (const button of document.querySelectorAll('button.portScroll')) {
button.classList.remove('down');
}
}
for (const button of document.querySelectorAll('button.portScroll')) {
if (button.classList.contains("down")) {
button.addEventListener("click", scrollDown);
} else {
button.addEventListener("click", scrollUp);
}
}
这是向下滚动的工作 Codepen:
解决方案
我创建了一个可以满足需要的函数。我希望没关系。
function scrollUpOrDown(_this, state) {
var portImg = _this.parentNode.parentNode.querySelector('img.item');
var height = portImg.clientHeight;
if(state.id > -1) {
clearInterval(state.id);
state.dir *= -1;
}
if(state.pos < 0) {
state.pos = 1;
}
state.id = setInterval(frame, 5);
function frame() {
if ((state.pos == height - 500 && state.dir > 0) || (state.pos == 0 && state.dir < 0)) {
clearInterval(state.id);
} else {
state.pos += state.dir;
portImg.style.top = -+state.pos + "px";
}
}
}
for (const button of document.querySelectorAll("button.portScroll")) {
let scollingState = {
pos: -1,
id: -1,
dir: 1
};
if (button.classList.contains("down")) {
button.addEventListener("click", function(){
scrollUpOrDown(this,scollingState);
});
}
}
https://codepen.io/prtjohanson/pen/QoEyQK
如果您想知道它为什么/如何工作,请查看此代码的输出
var array = [0,1,2,3,4,5];
for(const i in array) {
setTimeout(function(){console.log(i)}, Math.random()*1000)
}
并阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Scoping_rules_2
推荐阅读
- python - Openslide 不会显示 level_count-1 的 mmpx 属性
- r - plot.xts() x 轴刻度标签格式和 y 轴标签 [R]
- performance - How can x86 bsr/bsf have fixed latency, not data dependent? Doesn't it loop over bits like the pseudocode shows?
- java - Java Not crashing on double comma "malformed line"
- reactjs - Why am I getting a blank screen while following React JS?
- r - 使用管道优雅地设置 data.frame 的元素
- java - ScrollView 在 android 应用程序打开时自动滚动关闭
- excel - 使用 getElementById VBA 网页抓取
- dialogflow-es - Dialogflow Intent 将在所讲内容的基础上显示附加文本
- angular - testability.whenStable() 返回, testability.isStable() 返回 false