为什么这个jquery不起作用？

检查这个小提琴http://jsfiddle.net/KaDy8/7/。这是我的jQuery代码为什么这个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，活动类应该被添加到UI元素的签证，而当我键入5活动类应该被添加到一个UI元素mastercard.It工作时，我输入5到该字段中，卡正在变化，即它将类添加到ul元素mastercard，但是如果我输入4，那么它不会将类添加回ul元素签证。可能是什么问题？

来源

2013-11-26 Ajeesh

我认为这是不正确的做法。借助具有独特形式的CSS，您可以简化它。看看这个demo，这是你演示的修改后的形式。您可以轻松地做这件事情，通过改变主类可以改变你的演示

现在，你的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的整个部分请参阅demo

现在您可以重复使用相同的表格签证&万事达卡。请享用！！！！

来源

2013-11-26 07:24:09

相同的数字仍然嗨谢谢。但我认为，你havnt修改fiddl.eThe演示有代码我你可以检查一下吗？ – Ajeesh

@Ajeesh Achuthan plz现在检查 –

谢谢男人，那很顺利:) – Ajeesh

的问题是，

var cc_num = $('input[name="cardnumber"]').val();

总是会得到第一input元素的值与该名称，而不是触发事件之一。

一旦你5类型的，即input消失（你有没有注意到如何5消失？）。现在输入的任何值都将输入第二个input元素，该元素位于#mastercard之内。第一个input元素（属于#visa的元素）的值仍然是5，并且不会更改。这就是为什么条件cc_num.charAt(0)=='4'从未实现。

var cc_num = $(this).val();

（DEMO）

这不是一个令人满意的解决方案，虽然因为：

你可以通过获取当前input元素，从而引发了keyup事件的价值解决眼前的问题现在再次显示第一个input元素（在#visa中），并且仍包含值5。这是一个非常令人困惑的行为：用户只需输入4，并将其更改为5！

如果我是你，我只有一组表单元素（即只有一个input字段），并且只处理CSS的所有样式更改。例如：http://jsfiddle.net/KaDy8/16/。

来源

2013-11-26 06:38:59

好的，谢谢，让我看看我是否可以修改这一个，以便我可以将输入分区更改为单个分区 – Ajeesh

有没有我可以使用单个输入卡号并避免此问题？ – Ajeesh

我正在研究一个小例子：http://jsfiddle.net/KaDy8/16/。你只需要正确使用CSS类。 –

-1

您对bot输入字段（cardnumber）使用相同的名称。给输入赋予唯一的名称并检查它。

来源

2013-11-26 06:40:08

'name'属性的值不必是唯一的。 –

但在这种情况下，名称用于获取值。所以如果有两个名字相同的输入，第一个的值将总是返回。这个答案与这个问题有关。 –

所以你会将两个不同的事件处理程序绑定到这两个元素上？ –

请看看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"); 
    } 
}); 
});

来源

2013-11-26 06:40:33 vinothini

请解释什么是问题，你的答案解决了它。 –

感谢vinodini.It工作，但正如费利克斯克林解释，有一个问题，当我们切换回ruring卡 – Ajeesh

这里是演示： - jsfiddle.net/KaDy8/12/

这是你的问题

现在了解什么是您的情况的问题第一的演示所有你应该写$(this).val();采取当前输入，以便您将始终获得当前输入。

来源

2013-11-26 06:41:44

为什么这个jquery不起作用？

回答

相关问题