Question

检查这个小提琴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元素mastercard.It正在工作当我进入5字段，该卡正在改变了，就是它将类添加到ul元素的主卡，但是如果我输入4，它就不会将类添加回ul元素签证。可能是什么问题？

Answer 1

问题在于

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

将始终获取具有该名称的第一个 input元素的值，而不是触发该事件的元素的值。

输入5后，input 消失（你注意到5消失了吗？）。您现在输入的任何值都会输入到第二个 input元素中，该元素位于#mastercard内。第一个input元素（属于#visa的元素）的值仍为5且不会更改。这就是条件cc_num.charAt(0)=='4'永远不会实现的原因。

您可以通过获取当前 input元素的值来解决当前问题，这会触发keyup事件：

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

（DEMO）

这不是一个令人满意的解决方案，但现在第一个input元素（在#visa中）再次显示，但仍包含值5。这是一个非常令人困惑的行为：用户只需键入4，然后将其更改为5！

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

Answer 2

我认为这是不正确的方法。你可以借助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

现在您可以重复使用相同的签证和表格形式万事达。享受!!!!

Answer 3

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

Answer 4

以下是演示： - jsfiddle.net/KaDy8/12/

以下是您的问题的演示

现在了解你的情况是什么问题首先，您应该编写$(this).val();来获取当前输入，以便始终获得当前输入。

Answer 5

您对机器人输入字段使用相同的名称（cardnumber）。为输入指定唯一名称并进行检查。

为什么这个jquery不起作用？

5 个答案: