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

将按钮的id属性替换为class：

<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>

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

2 个答案: