jQuery刪除最接近的類

Question

我正在嘗試使用jQuery來執行removeClass請求。下面的腳本大部分工作正常，除了$(this).closest('.press-continue').removeClass('hidden');部分。

我已經發布了下面的jQuery和HTML。任何想法可能是什麼問題？

$(function() { 
    $('.step2').on('click', '.btn-book', function (e) { 
     $.ajax({ 
      url: '/reserve/' + this.id, 
      type: 'get', 
      dataType: 'json', 
      context: this, 
      success: function (json) { 
       if (json['success']) { 
        $(this).addClass('btn-selected'); 
        $('.btn-book').not(this).addClass('book-disabled').prop('disabled', true); 
        $('.next-step-hidden').addClass('show-button').prop('href', '/confirm/' + this.id); 
        $('.cancel').addClass('show-button').prop('id', this.id); 
        $('.alert-danger').addClass('hidden-error'); 
        $(this).closest('.press-continue').removeClass('hidden'); 
       } else if (json['error']) { 
        if (json['error'] == 1) { 
         alert("Another user has already booked this slot, please choose another slot."); 
         $(this).addClass('btn-selected').addClass('book-disabled').prop('disabled', true); 
        } 
       } 
      } 
     }); 
    }); 
}); 

HTML

<div id="main"> 
    <h2 class="info-bar clearfix"><b>Select parking time</b> <span>Step <i>2</i></span></h2> 
    <div class="alert alert-danger hidden-error"> 
     <strong>Expired!</strong> Sorry, the slot that you reserved has now expired. Please choose another slot below. 
     <br><i>Note: slots are reserved for 15 minutes.</i> 
    </div> 
    <form class="step2"> 
     <fieldset> 
      <legend><span>Select a Parking Slot</span></legend> 
      <div class="parking-time"> 
       <div class="input-row"> 
        <label class="label">12/06/2015 
         <br>Morning 
         <br>7am - 1pm</label> 
        <button class="btn btn-small btn-important btn-book" type="button" id="67"><i>book</i><b>reserved</b></button> 
        <span class="press-continue hidden">Press continue to confirm booking</span> 
       </div> 
       <div class="input-row"> 
        <label class="label">12/06/2015 
         <br>Afternoon 
         <br>2pm - 7pm</label> 
        <button class="btn btn-small btn-important btn-book" type="button" id="68"><i>book</i><b>reserved</b></button> 
        <span class="press-continue hidden">Press continue to confirm booking</span> 
       </div> 
       <div class="input-row"> 
        <label class="label">12/06/2015 
         <br>All Day 
         <br>&nbsp;</label> 
        <button class="btn btn-small btn-important btn-book" type="button" id="69"><i>book</i><b>reserved</b></button> 
        <span class="press-continue hidden">Press continue to confirm booking</span> 
       </div> 
      </div> 
      <!-- end parking-time --> 
      <div class="input-row input-row-last"> <a class="btn btn-small btn-info cancel">Cancel</a> <a class="btn btn-info next-step next-step-hidden">Continue <i class="sprite arrow"></i></a> </div> 
     </fieldset> 
    </form> 
</div> 
<!-- end main --> 

Answer 1

.closest()用於查找祖先元素，在這裏爲你正在尋找的下一個兄弟，所以你可以使用.next()$(this).next('.press-continue').removeClass('hidden');

$(function() { 
    $('.step2').on('click', '.btn-book', function (e) { 
     $.ajax({ 
      url: '/reserve/' + this.id, 
      type: 'get', 
      dataType: 'json', 
      context: this, 
      success: function (json) { 
       if (json['success']) { 
        $(this).addClass('btn-selected'); 
        $('.btn-book').not(this).addClass('book-disabled').prop('disabled', true); 
        $('.next-step-hidden').addClass('show-button').prop('href', '/confirm/' + this.id); 
        $('.cancel').addClass('show-button').prop('id', this.id); 
        $('.alert-danger').addClass('hidden-error'); 
        $(this).next('.press-continue').removeClass('hidden'); 
       } else if (json['error']) { 
        if (json['error'] == 1) { 
         alert("Another user has already booked this slot, please choose another slot."); 
         $(this).addClass('btn-selected').addClass('book-disabled').prop('disabled', true); 
        } 
       } 
      } 
     }); 
    }); 
});