Javascript 在单击多个按钮和同一类的按钮时运行 2 个函数

Question

我有一个投资组合网格，其中每个网格项目都有过去工作的屏幕截图。

目前在点击按钮时，它会调用一个函数来滚动屏幕截图并在到达图像底部时停止。

再次单击按钮后，我需要反转滚动。滚动由 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); 

    }
}

这是向下滚动的工作代码笔:

https://codepen.io/completewebco/pen/bZeVoz

Answer 1

我创建了一个函数来执行所需的操作。我希望没问题。

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