javascript - 仅在具有相同类名的特定项目上运行 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');