$（this）セレクタを使って同じクラスのdivをアニメーション化するにはどうすればいいですか？

Question

私は.pageSlideの同じクラス名で2つのdivを持っています。クラス名が.moveupまたは.movedownのボタンをクリックすると、そのボタンの各divが上下にスライドします。現時点では、div Aと関連付けられたボタンをクリックすると、div Bもアニメーション化されます。私はJSのどこかに$（この）セレクタが必要であると推測しています。よく分かりません。

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

を

はここで基本的に私はこれを持って取り組んでコード https://jsfiddle.net/hpe459ok/

のjsfiddleです.moveupと.movedownボタンにはdata attributesを使用します。 data-parentという属性をトップレベルの親の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>