Javascript 为什么这个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时，活动类别应添加到ul element visa，当我输入5时，活动类别应添加到ul element mastercard。当我在字段中输入5时，该卡正在工作，即该类别正在添加到ul element mastercard，但如果我输入4，它没有将该类添加回ul element visa。可能有什么问题？

问题在于

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

将始终获取具有该名称的第一个

输入

元素的值，而不是触发事件的元素的值

一旦你输入了

5

，

input

就会消失（你注意到

5

是如何消失的吗？）。您现在输入的任何值都将输入到第二个

输入

元素中，该元素位于

#万事达卡

中。第一个

输入

元素（属于

#visa

的元素）的值仍然是

5

，并且没有改变。这就是为什么条件

cc_num.charAt（0）='4'

从未满足的原因

您可以通过获取触发keyup事件的当前

输入

元素的值来解决眼前的问题：

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

（）

这不是一个令人满意的解决方案，因为现在第一个

输入

元素（在

#visa

中）再次显示，并且仍然包含值

5

。这是一个非常令人困惑的行为：用户刚输入了

4

，它就变成了

5

如果我是你，我将只有一组表单元素（即只有一个

input

字段），并且仅通过CSS处理所有样式更改。示例：。

问题在于

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

将始终获取具有该名称的第一个

输入

元素的值，而不是触发事件的元素的值

一旦你输入了

5

，

input

就会消失（你注意到

5

是如何消失的吗？）。您现在输入的任何值都将输入到第二个

输入

元素中，该元素位于

#万事达卡

中。第一个

输入

元素（属于

#visa

的元素）的值仍然是

5

，并且没有改变。这就是为什么条件

cc_num.charAt（0）='4'

从未满足的原因

您可以通过获取触发keyup事件的当前

输入

元素的值来解决眼前的问题：

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

（）

这不是一个令人满意的解决方案，因为现在第一个

输入

元素（在

#visa

中）再次显示，并且仍然包含值

5

。这是一个非常令人困惑的行为：用户刚输入了

4

，它就变成了

5

---

如果我是你，我将只有一组表单元素（即只有一个

input

字段），并且仅通过CSS处理所有样式更改。示例：。

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

您对bot输入字段使用了相同的名称（卡号）。为输入指定唯一名称并进行检查。

请查看

请看一看

---

下面是演示：-

jsfiddle.net/KaDy8/12/

这是你问题的演示

现在了解你的处境中的问题是什么

---

首先，您应该编写

$（this.val（）

用于获取当前输入，以便始终获得当前输入。

以下是演示：-

jsfiddle.net/KaDy8/12/

这是你问题的演示

现在了解你的处境中的问题是什么

---

首先，您应该编写

$（this.val（）用于获取当前输入，以便始终获取当前输入。
我认为这不是正确的方法。你可以用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>

有关新css，请参见

现在，您可以对visa&mastercard重复使用相同的表格。享受吧
 我认为这样做是不对的。你可以用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>

有关新css，请参见

现在，您可以对visa&mastercard重复使用相同的表格。享受吧
 请解释问题是什么，你的答案解决了它。谢谢维诺迪尼。它起作用了，但正如费利克斯·克林所解释的，当我们切换回上一张卡片时，问题仍然存在。请解释问题是什么，你的答案解决了它。谢谢维诺迪尼。它起作用了，但正如费利克斯·克林所解释的，有一个问题是，当我们切换回上一张卡片时，相同的数字仍然存在，但在本例中，名称用于获取值。所以，若有两个输入具有相同的名称，则将始终返回第一个输入的值。这个答案与这个问题有关。所以你会将两个不同的事件处理程序绑定到这两个元素上？这取决于。如果您不想这样做，我建议使用@vinothini给出的解决方案，但在本例中，名称用于获取值。所以，若有两个输入具有相同的名称，则将始终返回第一个输入的值。这个答案与这个问题有关。所以你会将两个不同的事件处理程序绑定到这两个元素上？这取决于。如果你不想这样做，我建议使用@vinothiniOk给出的解决方案谢谢，让我看看是否可以修改这个，这样我就可以将输入部分更改为一个单独的部分。有没有办法，对cardnumber使用一个单独的输入来避免这个问题？我正在处理一个小示例：。您只需要正确使用CSS类。好的，非常感谢。我将对代码进行一些修改，并将其作为一个示例