jquery - 如何在 jQuery 上进行链定位

Question

我正在研究this demo 。为什么我无法定位所选 anchor 链接的下一个和上一个部分的 ID？

为了得到下一个，我尝试了所有:

 var target = $(this).next('section').attr('id');
 var target = $(this).parent().parent().next('section').attr('id');
 var target = $(this).parent().next('section').attr('id');
 var target = $(this).parent().find('section').attr('id');

但无法获取所选.next-slide的下一节的ID

$(function(){
  $(".next-slide").on('click', function(event) {
      event.preventDefault();
        var target = $(this).next('section').attr('id');
      target = "#"+target;
       console.log(target); 
      $('html, body').animate({
        scrollTop: $(target).offset().top
      }, 800, function(){
      });
  });
});

Answer 1

$.next()定位下一个相邻元素，并且没有 section就在 .next-slide 旁边您页面上的链接。瞄准下一个section相对于您点击的链接，您需要找到父链接 section链接，然后定位下一个 section通过$.next()

您可以找到父项section使用 $.closest() 的链接，它返回与您的选择器匹配的第一个祖先，然后使用 $.next('section')以 section 为目标在那之后。

$(function(){
  $(".next-slide").on('click', function(event) {
      event.preventDefault();
        var target = $(this).closest('section').next('section').attr('id');
      target = "#"+target;
       console.log(target); 
      $('html, body').animate({
        scrollTop: $(target).offset().top
      }, 800, function(){
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section1">
<div class="col-md-12 box" id="box-1">
    <div class="cover">
      <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
    </div>
    <div class="cover"></div>
  <div class="col-md-12 up-pointer">
  </div>    
  <div class="col-md-12 down-pointer">
    <a role="button" class="pointer next-slide">
     <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
      </a>
  </div>
 </div>
</section>
<section id="section2">
<div class="col-md-12 box" id="box-1">
    <div class="cover">
      <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
    </div>
    <div class="cover"></div>
  <div class="col-md-12 up-pointer">
  </div>    
  <div class="col-md-12 down-pointer">
    <a role="button" class="pointer next-slide">
     <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
      </a>
  </div>
 </div>
</section>
<section id="section3">
<div class="col-md-12 box" id="box-1">
    <div class="cover">
      <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
    </div>
    <div class="cover"></div>
  <div class="col-md-12 up-pointer">
  </div>    
  <div class="col-md-12 down-pointer">
    <a role="button" class="pointer next-slide">
     <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
      </a>
  </div>
 </div>
</section>
<section id="section4">
<div class="col-md-12 box" id="box-1">
    <div class="cover">
      <img src='http://placehold.it/50x50/f3f5f6/f3f5f6' />
    </div>
    <div class="cover"></div>
  <div class="col-md-12 up-pointer">
  </div>    
  <div class="col-md-12 down-pointer">
    <a role="button" class="pointer next-slide">
     <img src="http://www.caapc.ca/wp-content/uploads/2016/09/map-marker-2-xxl.png" class="img-responsive" width="40px" height="40px" />
      </a>
  </div>
 </div>
</section>