Question

我目前正在为客户撰写捐款表格，并且我对按钮有一些问题。如下图所示：

当我点击那个输入框时，它会给出正确的背景颜色，但如果我输入一些内容并删除该值，背景颜色将保持不变并切换回默认值50.我想将框输入到ALWAYS如果文本光标在那里是唯一活跃的。即使用户删除了他们键入的内容并且光标仍在那里，我希望输入框是唯一具有该背景颜色的输入框，同时显示它是活动的。

所以，如果我只是点击它，它将是唯一一个活跃的，但当我输入内容并删除它时，它将保持活动状态，但也切换默认值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'); else内的$('#donation-amount').keyup(function()内评论此行.donation-amount。

当点击另一个按钮时，这将重置$('.donation-amount').val("");内的值。

在if内的$("#donation-amount").click(function()内添加此行^[A-Z][a-z]{1,15}$。

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

如果您有任何问题，请评论

如何在Jquery中一次激活一个类

1 个答案: