Jqueryで一度に1つのクラスをアクティブに保つ方法

Question

現在、クライアント用の寄付書類を作成中です。ボタンに問題があります。次のように：

入力ボックスをクリックすると正しい背景色が得られますが、何かを入力してその値を削除すると背景色はそのまま残り、デフォルト値の50に戻ります。テキストボックスがある場合は、入力ボックスを常にアクティブにするだけです。ユーザーが入力したものを削除しても、カーソルがまだそこに残っていても、そのボックスがアクティブであることを示している間は、入力ボックスがその背景色を持つ唯一のものになります。

ので、私はちょうどそれをクリックした場合には、一つだけアクティブになりますが、私はそれに何かを入力し、それを削除するとき、それはアクティブのままでなく、その二つがでアクティブになります$ 50のデフォルトを切り替えます一度。ここ

私のjQueryのです：ここ

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()); 

}); 

は私のhtmlです：

<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> 

任意の助けをいただければ幸いです！

Answer 1

値が空のときに#defaultをアクティブにしていますが、カーソルはそこにありますが、その行は必要ありません。

コメント の中にこの行$("#default").addClass('active');があります。

---

別のボタンをクリックすると、.donation-amountの値がリセットされます。

この行を追加する$('.donation-amount').val("");ifの中に$("#donation-amount").click(function()を追加します。

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

コメントご質問