javascript - 如何使用 $(this) 选择器为具有相同类的 div 设置动画？

Question

我有两个 div，具有相同的类名 .pageSlide。当我单击具有类名 .moveup 或 .movedown 的按钮时，我特别希望该按钮的相应 div 向上或向下滑动。目前，如果我单击与 say div A 关联的按钮，则 div B 也会设置动画。我猜我在 JS 的某个地方需要一个 $(this) 选择器。我不确定。

这是一个 jsfiddle 的工作代码 https://jsfiddle.net/hpe459ok/

基本上我有这个:

$('.moveup').click(function() {
  if ($('.pageSlide').css('top') == '-420px') {
    $('.pageSlide').animate({
      top: '0'
    }, 700);
  } else {
    $('.pageSlide').animate({
      top: '0'
    }, 700);
  }
});

$('.movedown').click(function() {
  if ($('.pageSlide').css('top') == '0') {
    $('.pageSlide').animate({
      top: '420'
    }, 500);
  } else {
    $('.pageSlide').animate({
      top: '420'
    }, 500);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
  <div class="page1">
    content
    <button class="moveup">Next page</button>
  </div>
  <div class="page2 pageSlide">
    content
    <button class="movedown">Previous page</button>
  </div>

</div>

<div class="container2">
  <div class="page1">
    content
    <button class="moveup">Next page</button>
  </div>
  <div class="page2 pageSlide">
    content
    <button class="movedown">Previous page</button>
  </div>

</div>

Answer 1

尝试使用下面的代码:

$('.moveup').click(function() {
    $(this).closest(".page1").siblings('.pageSlide').animate({
      top: '0'
    }, 700);
});

$('.movedown').click(function() {
    $(this).closest(".page2").animate({
      top: '420'
    }, 500); 
});