zoukankan      html  css  js  c++  java
  • $(obj).index(this)与$(this).index()

      <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
        </ul>
    <script>
        //  $(this).index() 测试代码一
        $("li").on("click",function(){
            var index = $(this).index();
            console.log(index); // 依次点击li元素输出: 0,1,2,3
        })
        // $(obj).index(this) 测试代码二
        $("li").on("click",function(){
            var index = $("li").index(this);
            console.log(index); // 依次点击li元素输出: 0,1,2,3
    }) </script>

     执行两段脚本并依次点击li元素,都是输出: 0/1/2/3,在这个场景下,作用一样。

     var reg = /^[0-9]{5}$/i;
                var hasfour = true;
                $(".nocode").html("");
                $(".vcodetip").show();
                $("input[name='vcode']").each(function (i, item) {
                    if (!reg.test($(this).val())) { 
                        if ($(this).val().length <= 4) {
                            if (hasfour == true){//定位焦点到第一个未填完整
                                $(this).focus();
                                
                                hasfour = false;
                            }
                            $("div[class='vcodetip']").eq($(this).index() - 1).css("visibility", "visible");//显示提示
                        }
                        //return false;//确定是否所有未输入完成的都提示
                    }
    
                });
     <div class="Step1div">
                            <span style="56px;">防伪码:&#12288;</span>
                            <input id="code1" type="text" name='vcode' class="inputcode" style="font-size: 14px;" placeholder="第一组" maxlength="5">
                            <input id="code2" type="text" name='vcode' class="inputcode" style="font-size: 14px;" placeholder="第二组" maxlength="5">
                            <input id="code3" type="text" name='vcode' class="inputcode" style="font-size: 14px;" placeholder="第三组" maxlength="5">
                            <input id="code4" type="text" name='vcode' class="inputcode" style="font-size: 14px;" placeholder="第四组" maxlength="5">
                            <a href="javascript:void(0);" class="Nextbtn" style="color:white" onclick="getTelInfo()">下一步</a>
                        </div>
    
                        <div class="Step1div tip">
                            <span class="space">&#12288;&#12288;&#12288;:</span>
                            <div class="nocode"></div>
                            <div class="vcodetip">请输入5位验证码</div>
                            <div class="vcodetip">请输入5位验证码</div>
                            <div class="vcodetip">请输入5位验证码</div>
                            <div class="vcodetip">请输入5位验证码</div>
                        </div>
  • 相关阅读:
    linux之awk命令
    HDU 2097 Sky数 进制转换
    HDU 2077 汉诺塔IV
    HDU 2094 产生冠军 dfs加map容器
    HDU 2073 叠框
    HDU 2083 简易版之最短距离
    HDU 2063 过山车 二分匹配
    天梯 1014 装箱问题
    天梯 1214 线段覆盖
    天梯 1098 均分纸牌
  • 原文地址:https://www.cnblogs.com/zhangyouwu/p/11577608.html
Copyright © 2011-2022 走看看