Wie man eine Klasse aktiv in Jquery hält

Question

Ich arbeite gerade an einem Spendenformular für einen Kunden und habe einige Probleme mit den Tasten. Wie unten gezeigt:

Wenn ich auf dieses Eingabefeld klicke, gibt es die richtige Hintergrundfarbe, aber wenn ich etwas eintippe und diesen Wert lösche, bleibt die Hintergrundfarbe und schaltet auf den Standardwert von 50 zurück Eingabefeld ist IMMER der einzige aktiv wenn der Text cursor da ist. Selbst wenn ein Benutzer das, was er eingibt, löscht und der Cursor immer noch da ist, möchte ich, dass das Eingabefeld das einzige mit dieser Hintergrundfarbe ist, während es anzeigt, dass es aktiv ist.

so, wenn ich ihm nur klicken, wird es die einzige aktiv sein, aber wenn ich etwas in sie eingeben und lösche es wird aktiv bleiben, sondern wechselt auch den Standard von 50 $, so wird zwei aktiv an einmal.

hier ist mein jquery:

<div class="form-container"> 
<div class="donate-heading text-center"> 
    <h1>Donate Now!</h1> 
</div> 
<div class="form-content"> 

<form action="" method="POST" id="payment-form"> 
    <span class="payment-errors"></span> 

    <div class="content-inner"> 
    <div class="row"> 
    <div class="form-group"> 
     <fieldset> 
     <legend class="text-center">How much would you like to donate</legend> 
     <div class="choose-pricing"> 
      <div class="btn-group"> 
      <div class="buttons"> 
      <button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button> 
      <button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button> 
      <button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button> 
      <input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom"> 
      </div> 
      <input type="hidden" name="donation-amount-value" id="donation-amount-value"> 
      </div> 
      <div class="money-donate"> 
      <div class="display-amount" id="display-amount"> 
      </div> 
      </div> 
     </div> 
     </fieldset> 
    </div> 
    </div> 
    <legend class="text-center">Enter your card details</legend> 
    <span class="full">Enter yor 16 digit card number:</span> 
    <div class="credit-card-num"> 
    <input type="text" name="cardNumber" id="creditCardNumber" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="XXXX-XXXX-XXXX-XXXX" data-stripe="number"> 
    </div> 
    <div class="text-center"> 
    <div class="date-wrapper"> 
    <div class="month"> 
     <span class="full">Month & Year of Expiry:</span> 
     <select name="month" id="expMonth" class="selectBox chzn-done" data-stripe="exp-month"> 
     <option data-stripe="cvc">Select Month</option> 
     <option value="1">1</option> 
     </select> 
     <div id="expMonth_chzn" class="chzn-container chzn-container-single"> 
     <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> 
     </a> 
     </div> 
     <select name="year" id="expYear" class="selectBox chzn-done" data-stripe="exp-year"> 
     <option value="">Select Year</option> 
     <option value="1">1</option> 
     </select> 
    </div> 
    <div class="cvn"> 
     <span class="full">Card Verrification Number 
     <a href="#" class="tooltip"> 
      <img src="/wp-content/themes/creativeforces/images/question.png" alt="question"> 
     </a> 
     <div class="tooltip-hover"> 
      <img src="" alt=""> 
     </div> 
     </span> 
     <input type="password" name="cardVeriNum" id="cardVeriNum"> 
    </div> 
    </div> 
    </div> 
    <fieldset class="personal-detail"> 
    <legend class="text-center">Personal Details</legend> 
    <div class="row"> 
     <div class="form-group"> 
     <input type="text" name="name" class="form-control" id="name" placeholder="First Name"> 
     <input type="text" name="last_name" class="form-control" id="last_name" placeholder="Last Name"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group"> 
     <input type="text" name="email" class="form-control" id="email" placeholder="Email"> 
     </div> 
    </div> 
     <div class="row"> 
     <div class="form-group"> 
     <!-- <textarea name="address" class="form-control" id="address">Address</textarea> --> 
     <textarea name="notes" class="form-control" id="add-note" placeholder="Additional Notes"></textarea> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group button"> 
     <div class="text-center"> 
     <button id="donate-btn" value="Donate" class="btn btn-default">Donate</button> 
     </div> 
     </div> 
    </div> 
    </fieldset> 
    </div> 
</form> 
</div> 
    </div> 

jede mögliche Hilfe würde geschätzt:

var defaultValue = 50; 

$(document).ready(function() { 

$('#donation-amount').keyup(function() { 
     this.value = this.value.replace(/[^0-9\.]/g,''); 

     if($(this).val()) { 
     $('#display-amount').text($(this).val()); 
    } else { 
     $('#display-amount').text(defaultValue); 
     $("#default").addClass('active'); 
     $("#btn2").removeClass('active'); 
     $("#btn3").removeClass('active'); 
    } 
}); 

    $(".selectvalue").click(function() { 
     $('#display-amount').text($(this).val()); 
    }); 

    $(".buttons .btn").click(function(){ 
     $(".buttons .btn").removeClass('active'); 
     $(this).toggleClass('active'); 
     $('#donation-amount').css("background-color","") 
    }); 
$("#donation-amount").click(function() { 

     if ($(this).hasClass('inpt-first')) { 
      $(this).css("background-color", "#c97e06"); 
      $("#default").removeClass('active'); 
      $("#btn2").removeClass('active'); 
      $("#btn3").removeClass('active'); 
      $('#display-amount').text('--'); 
     } 

     else{ 
      $("#default").addClass('active'); 

     } 

    }); 
$('#donation-amount').blur(function() { 
    $(this).attr('style', ''); 
    if($(this).val() == null || $(this).val() == 'Custom') { 
    $('#default').addClass('active'); 
    $('#display-amount').text(50); 
    } 
}); 

    $('#display-amount').text($('#default').val()); 

}); 

hier mein html ist!

Answer 1

Sie machen die #default werden aktiv, wenn der Wert leer ist, aber der Cursor ist da, Sie brauchen diese Zeile nicht.

Kommentieren Sie diese Zeile $("#default").addClass('active'); in Ihrem else innerhalb $('#donation-amount').keyup(function().

---

Dadurch wird der Wert innerhalb .donation-amount zurückgesetzt, wenn eine andere Schaltfläche geklickt wird. Diese Zeile $('.donation-amount').val(""); innerhalb der if innerhalb $("#donation-amount").click(function() einfügen.

JSFiddle: https://jsfiddle.net/va9nmr3g/

Kommentar, wenn Sie Fragen haben