美文网首页
根据首字母检索内容

根据首字母检索内容

作者: one_mybe | 来源:发表于2019-11-01 10:58 被阅读0次

    下面是根据首字母检索内容并让其显示的代码,话不多说,上干货

    以下是我自己写的用来测试的html代码

    <div class="nu_b">
       
            
           
                
                <div class="mencenter">
                    <div class="menk">A</div>
                    <div class="menk">B</div>
                    <div class="menk">C</div>
                    <div class="menk">D</div>
                    <div class="menk">E</div>
                    <div class="menk">F</div>
                    <div class="menk">G</div>
                    <div class="menk">H</div>
                    <div class="menk">I</div>
                    <div class="menk">J</div>
                    <div class="menk">K</div>
                    <div class="menk">L</div>
                    <div class="menk">M</div>
                    <div class="menk">N</div>
                    <div class="menk">O</div>
                    <div class="menk">P</div>
                    <div class="menk">Q</div>
                    <div class="menk">R</div>
                    <div class="menk">S</div>
                    <div class="menk">T</div>
                    <div class="menk">U</div>
                    <div class="menk">V</div>
                    <div class="menk">W</div>
                    <div class="menk">X</div>
                    <div class="menk">Y</div>
                    <div class="menk">Z</div>
             </div>
    
            <div>
                <div class="mencar">考勤</div>
                <div class="mencar">费用报销</div>
                <div class="mencar">请假申请单</div>
                <div class="mencar">a</div>
                <div class="mencar">a</div>
                <div class="mencar">a</div>
                <div class="mencar">M</div>
                <div class="mencar">M</div>
                <div class="mencar">M</div>
            </div>
        </div>
      
            
    </div>
    

    下面是js代码

    var mycars=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
        var mycarss=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
        $(".menk").click(function(){
            $(".mencar").css({"display":"none"});
            var san=$(this).index();
            console.log(san);
            var menu_cards=document.getElementsByClassName("mencar");
            for(var i=0 ;i<menu_cards.length;i++){
                var menu_card=menu_cards[i];
                var meet=menu_card.innerHTML;
                var py = Mtils.utils.makePy(meet[0], true);
                if (py.indexOf(mycars[san]) != -1 || meet.indexOf(mycars[san]) != -1 || meet.indexOf(mycarss[san]) != -1) {
                    console.log(py);
                    menu_card.style.display = "block"
                }
            }
        })
    

    这样就可以根据首字母检索内容并让其显示啦
    欢迎点赞收藏以及评论哦
    关注一下就更好了

    相关文章

      网友评论

          本文标题:根据首字母检索内容

          本文链接:https://www.haomeiwen.com/subject/ktkfbctx.html