如何使用$（this）選擇器爲具有相同類的div生成動畫？

Question

我有兩個div，具有相同的類名.pageSlide。當我點擊類名爲.moveup或.movedown的按鈕時，我特別希望該按鈕的各個div可以向上或向下滑動。目前，如果我點擊與div相關的按鈕，則div B也會動畫。我猜我需要一個$（this）選擇器在JS的某個地方。我不確定。

這裏的工作代碼 https://jsfiddle.net/hpe459ok/

的本質的jsfiddle我有這樣的：

$('.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); 
}); 

Answer 2

我會在.moveup和.movedown按鈕上使用data attributes。通過將屬性data-parent設置爲頂級父項<div>的ID，修改現有函數以處理適當的動畫變得微不足道。

$('.moveup').click(function() { 
 
    var parent = $(this).data('parent'); 
 
    
 
    if ($('#'+parent).find('.pageSlide').css('top') == '-420px') { 
 
    $('#'+parent).find('.pageSlide').animate({ 
 
     top: '0' 
 
    }, 700); 
 
    } else { 
 
    $('#'+parent).find('.pageSlide').animate({ 
 
     top: '0' 
 
    }, 700); 
 
    } 
 
}); 
 

 
$('.movedown').click(function() { 
 
    var parent = $(this).data('parent'); 
 
    
 
    if ($('#'+parent).find('.pageSlide').css('top') == '0') { 
 
    $('#'+parent).find('.pageSlide').animate({ 
 
     top: '420' 
 
    }, 500); 
 
    } else { 
 
    $('#'+parent).find('.pageSlide').animate({ 
 
     top: '420' 
 
    }, 500); 
 
    } 
 
});

.pageSlide { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    height: 400px; 
 
    background: ghostwhite; 
 
    z-index: 0; 
 
} 
 

 
.page2 { 
 
    z-index: 1; 
 
    top: 420px; 
 
} 
 

 
.image-wrapper { 
 
    height: 400px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: center; 
 
    border: black 1px solid; 
 
} 
 

 
.overlay-left { 
 
    background-color: white; 
 
} 
 

 
.overlay-right { 
 
    background-color: white; 
 
} 
 

 
.image-overlay-content-left { 
 
    background-color: white; 
 
} 
 

 
.image-overlay-content-right { 
 
    background-color: white

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="small-12 columns" id="nominate"> 
 

 
    <div class="image-wrapper overlay overlay-left"> 
 
    <div class="image-overlay-content image-overlay-content-left" id="formslide"> 
 
     <form id="foo" method="post" name="nomForm" action="nominate-test.html#thankyou"> 
 

 
     <div class="page1"> 
 
      <label class="row"> 
 
      <h2 class="headline">Your name</h2> 
 
      <input placeholder="e.g. John Smith" type="text" name="name" id="name" tabindex="1" autofocus> 
 
      <span id="nameError" class="error headline"></span> 
 
      </label> 
 

 
      <label class="row email"> 
 
      <h2 class="headline">Your email address</h2> 
 
      <input placeholder="example@rofordaward.co.uk" type="text" name="email" id="email" tabindex="2"> 
 
      <span id="emailError" class="error headline"></span> 
 
      </label> 
 

 
      <label class="row"> 
 
      <h2 class="headline">Company name</h2> 
 
      <input placeholder="e.g. Roford" type="text" name="company" id="company" tabindex="3"> 
 
      <span id="companyError" class="error headline"></span> 
 
      </label> 
 
      <div class="next"> 
 
      <button type="button" class="moveup" data-parent="nominate">Next page</button><i class="icon-down-open"></i></div> 
 
     </div> 
 

 
     <div class="pageSlide page2"> 
 
      <label class="row reason"> 
 
      <h2 class="headline">Reason for nomination</h2> 
 
      <textarea id="textarea" rows="6" cols="25" maxlength="1000" name="message" id="message" placeholder="A brief evidence based summary"></textarea> 
 
      <span id="messageError" class="error headline"></span> 
 
      <div id="text-area-wrap"> 
 
       <div id="textarea_feedback"></div> 
 
      </div> 
 
      </label> 
 

 
      <div class="row button-wrap"> 
 
      <div class="column small-12"> 
 
       <input class="button" name="submit" type="submit" id="contact-submit" value="Submit"> 
 
      </div> 
 
      </div> 
 
      <div class="prev"> 
 
      <button type="button" class="movedown" data-parent="nominate">Previous page</button><i class="icon-up-open"></i></div> 
 
     </div> 
 

 
     </form> 
 
    </div> 
 

 
    </div> 
 

 
</div> 
 

 
<div class="small-12 columns" id="apply"> 
 

 
    <div class="image-wrapper overlay overlay-right"> 
 

 
    <div class="overlay-option-headline overlay-option-headline-right"> 
 
     <h5>Tell us why you're a great business</h5> 
 
     <h1 class="headline">Apply</h1> 
 
    </div> 
 
    <div class="image-overlay-content image-overlay-content-right"> 
 
     <div class="page1"> 
 
     <h2 class="headline">Application Form</h2> 
 

 
     <div class="row apply-points"> 
 
      <div class="column small-12"> 
 
      <h5>Please make sure you have read our <a href="about.html">Criteria</a> page and <a href="#">terms and conditions</a> in full before applying.</h5></div> 
 

 
      <div class="column small-12"> 
 
      <h5>Ensure you have gathered evidence to support your application.</h5></div> 
 

 
      <div class="column small-12"> 
 
      <h5>Shortlisted companies will be contacted with further instructions.</h5></div> 
 
     </div> 
 
     <div class="next"> 
 
      <button type="button" class="moveup" data-parent="apply">Next page</button><i class="icon-down-open"></i></div> 
 
     </div> 
 

 
     <div class="page2 pageSlide"> 
 
     <h2 class="headline">Contact name</h2> 
 

 
     <div class="row apply-points"> 
 
      <div class="column small-12"> 
 
      <h5>aduhwijdaduhwijdaduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd ijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd</h5></div> 
 
     </div> 
 
     <div class="prev"> 
 
      <button type="button" class="movedown" data-parent="apply">Previous page</button><i class="icon-up-open"></i></div> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 

 
</div>