Javascript 如何使用if语句获取要更改的值

我遇到了一个问题，我试图根据表单中单击的内容更改值。如下图所示：

下面是第一次加载页面时表单的外观。

当我点击自定义输入框时，它会改变颜色，这很好

当我点击其他按钮时，它会切换背景色，这很好

但是，当我点击屏幕上除按钮以外的任何地方时，背景色仍然存在。如果框中没有输入值，用户单击屏幕上的任意位置，我希望该值自动返回默认值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");
             // $('#donation-amount').text('--');
             $("#default").removeClass('active');
             $("#btn2").removeClass('active');
             $("#btn3").removeClass('active');
            $('#display-amount').text('--');
         } 

        else{
            $(this).css("background-color","") 
            $("#default").addClass('active');   
            $(this).removeClass('inpt-first');

        }

    });

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

现在就捐赠吧！
你想捐多少钱
50
100
150
输入您的卡的详细信息
输入您的16位卡号：
到期月份和年份：
选择月份
1.
选择年份
1.
卡验证号
个人资料
捐赠

将以下脚本添加到脚本中

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

---

进步！因此，当我点击页面上的其他地方时，背景色消失了，但不幸的是，50没有显示在显示量中，并且背景色没有返回默认的按钮！！背景色切换为默认颜色，但我不确定为什么“显示量”中没有显示50。它不会自动切换回显示50。我不认为

Custom

是输入的值。我认为这是一个占位符。现在代码被更改了，试试看。我确实让它工作了！我删除了if语句，一切都很好！谢谢你的帮助！