hinzufügen und entfernen Klasse auf der Basis des gewählten Wert

Question

<div class="availability-form"> 
 
    <select class="awe-select" id="dayss"> 
 
    <option value="one">For 1 Day</option> 
 
    <option value="more">For More Days</option> 
 
    </select> 
 
    <input type="text" name="book_date" id="arrival" class="awe-calendar" placeholder="Booking Date"> 
 
    <input type="text" name="book_dep_date" id="departure" class="awe-calendar" placeholder="Booking Departure Date"> 
 
    <div class="vailability-submit"> 
 
    <button class="awe-btn awe-btn-13" type="submit" name="chk" style="margin-top: -9px;margin-left: 20px;">FIND Availability</button> 
 
    </div> 
 
</div>

$(document).ready(function() { 
 
    $('#dayss').on('change', function() { 
 
    var a = $('#dayss').val(); 
 
    if (a == 'one') { 
 
     $('#departure').removeClass('awe-calendar'), 
 
     $('#departure').addClass('hidden'); 
 
    } else { 
 
     $('#departure').removeClass('hidden'), 
 
     $('#departure').addClass('awe-calendar'); 
 
    } 
 
    }); 
 
});

wenn wenn die Bedingung wahr haben, gibt es nur 'addClass (' versteckt ')' nicht funktioniert arbeiten 'removeClass (Ehrenkalender)'. Bitte helfen Sie.

Answer 1

$(document).ready(function(){ 
    $('#dayss').on('change', function(){ 
     var a = $('#dayss').val(); 
     if(a == 'one') { 
      $('#departure').removeClass('awe-calendar').addClass('hidden'); 
     } 
     else{ 
      $('#departure').removeClass('hidden').addClass('awe-calendar'); 
     } 
    }); 
}); 

Working Demo

$(document).ready(function(){ 
 
    $('#dayss').on('change', function(){ 
 
     var a = $('#dayss').val(); 
 
     if(a == 'one') { 
 
      $('#departure').removeClass('awe-calendar').addClass('hidden'); 
 
     } 
 
     else{ 
 
      $('#departure').removeClass('hidden').addClass('awe-calendar'); 
 
     } 
 
    }); 
 
});

.hidden{ 
 
    display:none; 
 
} 
 
.awe-calendar{ 
 
    display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="availability-form"> 
 
    <select class="awe-select" id="dayss"> 
 
    <option value="one">For 1 Day</option> 
 
    <option value="more">For More Days</option> 
 
    </select> 
 
    <input type="text" name="book_date" id="arrival" class="awe-calendar" placeholder="Booking Date"> 
 
    <input type="text" name="book_dep_date" id="departure" class="hidden" placeholder="Booking Departure Date"> 
 
    <div class="vailability-submit"> 
 
    <button class="awe-btn awe-btn-13" type="submit" name="chk" style="margin-top: -9px;margin-left: 20px;">FIND Availability</button> 
 
    </div> 
 
</div>