1
我目前正在爲客戶端提供捐款表單，並且在按鈕方面存在一些問題。如下圖所示：如何在Jquery中一次保持一個類是活動的
當我點擊該輸入框時，它會給出正確的背景顏色，但如果我輸入某些東西並刪除該值，背景顏色將保持並切換回默認值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>
任何幫助，將不勝感激！
你可以把它小提琴鏈接？ –
https://jsfiddle.net/os1r1z9h/ 我不能讓我的jquery工作，雖然 – avasssso
對於你的小提琴，它有助於，如果你包含jQuery庫，並把JavaScript代碼放在指定的JavaScript區域（而不是在CSS區域）：https：//jsfiddle.net/qhn8ht7f/ –