javascript - JQuery 的scrollTo 元素只工作一次

Question

我正在开发一个网站，通过父页面上的幻灯片显示我的子页面。在每个子页面上，我都有一个向下滚动链接，可以滚动到图像上方的第一个标题。但是，当我链接到标题元素时，它仅适用于显示的第一个子页面，而不适用于其他子页面。我尝试用一​​个值替换该元素，当这样做时，它适用于我的所有页面，因此这不是由于滚动功能造成的。我尝试通过类更改目标元素 ID，因为我通过循环显示页面并认为 ID 可能是问题所在，但它仍然无法正常工作。有人可能知道这里发生了什么事吗？这是我的代码:

JS:

    $('.scroll-down').click (function scroll() {
        $(".slider").scrollTo($('h3.title') ,800);
    }); 

HTML/PHP:

foreach ($children as $post){
$thumbnailid=get_post_thumbnail_id($post);
$postthumbnail= wp_get_attachment_image_src($thumbnailid,'full-size');
  setup_postdata($post);
  ?>
  <div class = mySlides>
    <a class="scroll-down"></a>  
    <img src="<?php echo $postthumbnail[0];?>">
    <h3 class="title"><?php echo ($post->post_title);?></h3>
    <?php the_content($post);?>
  </div> 
  <?php
}

我设法让它在所有页面上工作一次，但是在处理其他事情之后，它停止工作，并且我没有修改js行。我希望有人能给我指出解决这个问题的方向!谢谢!

Answer 1

很快，这是因为你的 js 选择器。当您使用 $('h3.title') 作为选择器时，它会从代码顶部扫描并获取第一个。

为此，您可以使用如下代码:

 $('.scroll-down').click (function scroll() {
     var nextTitle = $(this).parent().find('h3.title');
     $(".slider").scrollTo(nextTitle) ,800);
 }); 

注意:我没有在真实网站上检查过。让我知道它是否有效。