为什么这个jquery不能工作？
看看这把小提琴http://jsfiddle.net/KaDy8/7/。这是我的jquery代码
jQuery(document).ready(function(){
$('input[name="cardnumber"]').on('keyup',function(){
var cc_num = $('input[name="cardnumber"]').val();
if(cc_num.charAt(0)=='4'){
$('#visa').addClass("active");
$('#mastercard ').removeClass("active");
}else if(cc_num.charAt(0)=='5'){
$('#mastercard').addClass("active");
$('#visa').removeClass("active");
}
});
});当我输入4时，活动类应该添加到ul元素签证中，当我键入5活动类应该添加到ul元素时，当我进入字段5时，卡正在被更改，也就是说它是将类添加到ul元素万事达卡，但从那里开始，如果我输入4，它没有将类添加回ul元素visa.What可能是问题所在？
回答 5
Stack Overflow用户
发布于 2013-11-26 07:24:09
我认为这样做是不对的。您可以通过CSS的帮助使它变得简单，具有独特的形式。看看这个演示，它是您的演示的修改形式。您可以通过更改主类轻松地完成此操作，可以更改演示的整个部分。
现在您的Html看起来是这样的
<section id='cards' class="credit-card visa gr-cards">
<div class="visa-logo">visa</div>
<div class="mastercard-logo"><div></div><div></div></div>
<form>
<h2>Payment Details</h2>
<ul class="inputs">
<li>
<label>Card Number</label>
<input type="text" name="cardnumber" pattern="[0-9]{13,16}" class="full gr-input" required />
</li>
<li>
<label>Name on card</label>
<input type="text" name="card_name" size="20" class="month gr-input" required />
<li class="expire last">
<label>Expiration</label>
<div class="dropdown">
<select name="one" class="dropdown-select month gr-input">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
<div class="dropdown">
<select name="one" class="dropdown-select year gr-input">
<option value="">Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
<div class="clearfix"></div>
</li>
<li class="cvc-code last">
<label>CVV Code</label>
<input type="text" name="cvc_code" value="174" size="10" class="gr-input" required />
</li>
<input type="post" name="submit" value="Pay Now" class="fsSubmitButton"/>
<div class="clearfix"></div>
</ul>
</form>
<div class="visa-watermark">visa</div>
<div class="mastercard-watermark"><div></div><div></div></div>
</section>和JS如下所示
$(document).ready(function(){
$('input[name="cardnumber"]').on('keyup',function(){
var cc_num = $(this).val();
if(cc_num.charAt(0)=='4'){
$('#cards.credit-card').removeClass("visa mastercard").addClass("visa");
} else if(cc_num.charAt(0)=='5'){
$('#cards.credit-card').removeClass("visa mastercard").addClass("mastercard");
}
});
});有关新的css，请参见演示
现在，您可以重复使用相同的形式的签证和万事达卡。好好享受！
Stack Overflow用户
发布于 2013-11-26 06:38:59
问题是
var cc_num = $('input[name="cardnumber"]').val();将始终获得具有该名称的first input元素的值，而不是触发事件的名称。
输入5后，input就消失了(您注意到5是如何消失的吗？)现在输入的任何值都将输入到第二个input元素中，该元素位于#mastercard内部。第一个input元素(属于#visa的元素)的值仍然是5，不会改变。这就是为什么cc_num.charAt(0)=='4'从未得到满足的原因。
可以通过获取当前input元素的值来解决当前的问题，该元素触发了keyup事件：
var cc_num = $(this).val();(演示)
这不是一个令人满意的解决方案，因为现在第一个input元素(在#visa中)再次显示，并且仍然包含值5。这是一个非常令人困惑的行为:用户刚刚输入了4并将其更改为5！
如果我是您，我将只有一组表单元素(即只有一个input字段)，并且只通过CSS处理所有的样式更改。例子：http://jsfiddle.net/KaDy8/16/.
Stack Overflow用户
发布于 2013-11-26 06:40:33
请看一下http://jsfiddle.net/KaDy8/11/
jQuery(document).ready(function(){
$('input[name="cardnumber"]').on('keyup',function(){
var cc_num = $(this).val();
if(cc_num.charAt(0)=='4'){
$('#visa').addClass("active");
$('#mastercard ').removeClass("active");
}else if(cc_num.charAt(0)=='5'){
$('#visa').removeClass("active");
$('#mastercard').addClass("active");
}
});
});https://stackoverflow.com/questions/20210001
复制相似问题
腾讯云开发者
