仅在具有相同类名的特定项上运行Javascript函数

Question

在不使用jQuery的情况下，我如何才能仅在一个与其他项具有相同类名的项上运行函数？

我有一个WordPress循环，每个项目都有一个按钮，用于在div中的图像上运行函数。

下面是在页面上重复10次的循环项：

 <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <div class="block bg-white relative mt-7 work__image-wrap">
       <a href='<?php echo types_render_field("website-url"); ?>' target="_blank">
        <?php echo '<img class="item absolute pin-t w-full h-auto pin-l" src="'. $workitem .'" alt="'. the_title() .'"/>';?>
       </a>
      </div>
       <div class="button-wrap">
        <button id="portScroll">Scroll Down</button>
       </div>
       <div class="p-2">
        <h3 class="text-black font-bold pt-4 pb-2"><a class="text-black font-bold" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
       </div>
    </li>

当用户单击该按钮时，该函数会更改CSS，使其向上滚动。

如何仅在循环中的项上运行函数？

下面是我用来运行函数的JS。它在第一个循环项上工作得很好，但在其他循环项上就不行。

function scrollDown() {
    var portImg = document.getElementById('item');
    var height = portImg.clientHeight;
    console.log(height);
    var pos = 0;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == height) {
            clearInterval(id);
        } else {
            pos--;
            portImg.style.top = pos + 'px';
        }
    }
}

Answer 1

用class替换按钮的id属性

<button class="portScroll">Scroll Down</button>

按如下方式定义按钮单击处理程序：

for (const button of document.querySelectorAll('button.portScroll')) {
    button.addEventListener("click", scrollDown);
}

在函数scrollDown中，如下所示获取图像：

var portImg = this.parentNode.parentNode.querySelector('img.item');

或者，或者：

var portImg = this.closest('li').querySelector('img.item');

Answer 2

这就是我要做的(当然是简化的)：

​

(function(){
  const posts = document.getElementsByClassName('post');
  for(let i = 0, m = posts.length; i < m; i++){
    const buttonElement = posts[i].getElementsByTagName("BUTTON")[0];
    buttonElement.addEventListener('click', handleButton);
  }
  function handleButton(e){
    scrollDown(e.target.dataset.postId);
  }
  function scrollDown(item) {
    var portImg = document.getElementById('post-image-' + item);
    console.log(portImg);
    var height = portImg.clientHeight;
    var pos = 0;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == height) {
            clearInterval(id);
        } else {
            pos--;
            portImg.style.top = pos + 'px';
        }
    }
}
})();

<div class="post">
  <img id="post-image-199">
  <button data-post-id="199">
    Click Me
  </button>
</div>
<div class="post">
  <img id="post-image-195">
  <button data-post-id="195">
    Click Me
  </button>
</div>
<div class="post">
  <img id="post-image-198">
  <button data-post-id="198">
    Click Me
  </button>
</div>

​