Question

我有几个类名为“fullcontent”的div。在每个div中我有两个元素：“fullcontent - prev”和“fullcontent - next”。单击此元素后，我想滚动到下一个/上一个fullcontent-div。

但是我不能解决这个问题：

https://www.codeproject.com/Articles/137979/Simple-HTTP-Server-in-C

$(".fullcontent--prev").click(function() {
  $('html, body').animate({
      scrollTop: $('.fullcontent').nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").click(function() {
  $('html, body').animate({
      scrollTop: $('.fullcontent').nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

.fullcontent {
  z-index: 900;
  width: 100%;
  height: 100vh;
  opacity: 0.5;
  font-size: 60px;
  color: black;
  position: relative;
  background-color: yellow;
  margin-bottom: 100px;

  &--prev {
    height: 25%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    position: absolute;
    background-color: red;
    cursor: pointer;
  }

  &--next {
    height: 75%;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0.55;
    position: absolute;
    background-color: green;
    cursor: pointer;
    }
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<section>

<div class="fullcontent"> 1
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

<div class="fullcontent"> 2
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

<div class="fullcontent"> 3
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

<div class="fullcontent"> 4
  <div class="fullcontent--prev"></div>
  <div class="fullcontent--next"></div>
</div>

</section>

错误在哪里？

Answer 1

您必须定位特定点击元素的父级。您可以在您的案例$(this).closest('.fullcontent')中使用。

您的代码变为：

$(".fullcontent--prev").click(function() {
  $('html, body').animate({
      scrollTop: $(this).closest('.fullcontent').prevAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").click(function() {
  $('html, body').animate({
      scrollTop: $(this).closest('.fullcontent').nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

JSFIDDLE

Answer 2

您没有保存对当前元素的引用只需添加var elementCur=$(this).parent();的{{1}}和next var curElement=$(this).parent()等参考，如下所示

prev

参见演示

$(".fullcontent--prev").on('click',function() {
var curElement=$(this).parent();
  $('html, body').animate({
      scrollTop: curElement.prevAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").on('click',function() {

var elementCur=$(this).parent();
  $('html, body').animate({
      scrollTop: elementCur.nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--prev").on('click', function() {
  var curElement = $(this).parent();
  $('html, body').animate({
    scrollTop: curElement.prevAll().offset().top
  }, 1000, 'easeInOutSine');
});

$(".fullcontent--next").on('click', function() {

  var elementCur = $(this).parent();
  $('html, body').animate({
    scrollTop: elementCur.nextAll().offset().top
  }, 1000, 'easeInOutSine');
});

.fullcontent {
  z-index: 900;
  width: 100%;
  height: 100vh;
  opacity: 0.5;
  font-size: 60px;
  color: black;
  position: relative;
  background-color: yellow;
  margin-bottom: 100px;
  &--prev {
    height: 25%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    position: absolute;
    background-color: red;
    cursor: pointer;
  }
  &--next {
    height: 75%;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0.55;
    position: absolute;
    background-color: green;
    cursor: pointer;
  }
}

Answer 3

index = 1;
$('div.fullcontent').click(function(){  
  $('html, body').animate({
      scrollTop: $('div.fullcontent:eq('+index+')').offset().top
  }, 1000, 'easeInOutSine');
  index++;
  if(index>3)
  index=0;
  console.log(index);
})

尝试此代码，您将获得预期的结果

https://jsfiddle.net/y10dqh4q/

滚动到具有相同父类的下一个元素

3 个答案: