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>

最佳答案

JSFiddle。
将以下脚本添加到脚本中。

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

关于javascript - 如何使用if语句获取要更改的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36532243/