Fatal编程技术网
  • javascript/
  • Javascript 如何使用jquery在css之间切换

Javascript 如何使用jquery在css之间切换

javascript jquery html css forms

Javascript 如何使用jquery在css之间切换,javascript,jquery,html,css,forms,Javascript,Jquery,Html,Css,Forms,我有两个表格，它们位于ul中，可以用来显示一个表格，可以用来一次显示另一个表格。但是我下面的jquery是以一种onclick函数的方式进行的。当我点击链接时，visa，visa class是活动的，当我点击万事达卡时，万事达卡是活动的。但是我需要一个jquery，它可以在卡号字段中输入时使类活动。当我输入一个以4开头的数字时，必须执行，当我插入以5开头的号码时，必须发生 下面是我的html <html lang="en"> <head> <sc

我有两个表格，它们位于ul中，
  • 可以用来显示一个表格，
  • 可以用来一次显示另一个表格。但是我下面的jquery是以一种onclick函数的方式进行的。当我点击链接时，visa，visa class是活动的，当我点击万事达卡时，万事达卡是活动的。但是我需要一个jquery，它可以在卡号字段中输入时使类活动。当我输入一个以4开头的数字时，必须执行
    • ，当我插入以5开头的号码时，必须发生
    
下面是我的html
    

      <html lang="en">
    <head>
    <script src="jquery-1.7.2.min.js"></script>

    <script>



    jQuery(document).ready(function(){
        // Switch cards
        jQuery('.switchCard').click(function(e){
            var newCard = jQuery(this).attr('href');
            e.preventDefault();

            jQuery('.cards li.active').fadeOut('fast',function(){
                jQuery(this).removeClass('active');
                jQuery(newCard).fadeIn('fast',function(){
                    jQuery(newCard).addClass('active');
                });
            });
        });
    });


    </script>


     <script src="main.js"></script>


    <link rel="stylesheet" href="style.css" />
    </head>
    <body>

       <section class="card-select">
            <h2>Select Payment Type</h2>
            <div class="wrap">
                <a href="#visa" class="switchCard">
                    <img src="visa.png">
                </a>

                <a href="#mastercard" class="switchCard">
                    <img src="mastercard.png">

            </div>
        </section>






    <ul class="cards">


    <li id="visa" class="active">
    <section class="credit-card visa gr-visa">
            <div class="logo">visa</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="watermark">visa</div>
        </section>
    </li>
    <li id="mastercard">
    <section class="credit-card mastercard gr-mastercard">
            <div class="logo"><div></div><div></div></div>

            <form>
                <h2>Payment Details</h2>

                <ul class="inputs">
                    <li>
                        <label>Card Number</label>
                        <input type="text" name="card_number" 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="fsSubmitButtonM"/>
                    <div class="clearfix"></div>

                </ul>
            </form>
            <div class="watermark"><div></div><div></div></div>
        </section>

    </li>
    </body>
    </html>

    
下面的css处理卡片的隐藏和显示
    

    /* === Cards === */
.cards {list-style:none;}
.cards>li {display:none;}
.cards>li.active {display:block;}

    
用于使用onclick切换类的jquery代码是
    

     jQuery(document).ready(function(){
        // Switch cards
        jQuery('.switchCard').click(function(e){
            var newCard = jQuery(this).attr('href');
            e.preventDefault();

            jQuery('.cards li.active').fadeOut('fast',function(){
                jQuery(this).removeClass('active');
                jQuery(newCard).fadeIn('fast',function(){
                    jQuery(newCard).addClass('active');
                });
            });
        });
    })

;

    
我不知道如何修改上述代码，以便在卡号字段中输入以某某开头的数字时可以更改类别
    
很抱歉代码描述太长，但是为了获得清晰的视图，我已经给出了完整的代码描述
    

    js fiddle
    尝试使用文本框的更改事件，在文本框中输入数字
    

    $( ".target" ).change(function() {
  alert("Get the value and validate");
//if textbox val == 4 then master else visa
});

    

    试试这个函数
    

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

    

    检查可能有帮助的是JSFIDDLE检查可能有帮助的先生这是小提琴，我用它更新了代码。但它看起来不起作用。我认为代码是正确的，但出了什么问题？这是wokring！这里有一个小错误，就是用“#…”代替“#…”，以便向ul元素添加或删除类。无论如何，谢谢：）

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