Tuş basımıyla ilgili css sınıfını nasıl ekleyebilirim

Question

Her li'de tek karakterli sırasız liste var. Bir kullanıcı klavyede herhangi bir harf basmışsa, sayfamda karşılık gelen li'ye css sınıfı eklemek istedim. Kullanıcı klavyede A basarsa, ben o

 $(document).keypress(function(e){ 
     var x = e.which; 
     if((x >= 65 && x <= 90)||(x >=97 && x <= 122)||(x >=48 && x <= 57)) { 
     checkfirst(x); 

     } 
     }); 
    // pick list item with the text content of the value passed 
    function checkfirst(x){ 
     var y = $('.list').find('li'); 
     // code will go here 
     //am trying to find the li with text equal to the argument passed 
    } 

Answer 1

kullanmayın nasıl başladığını budur A olarak içeriğe sahiptir li bulup

<div> 
     <ul class ='list'> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
     ... 
     <li>z</li> 
     </ul> 
    </div> 

için css sınıfını eklemek istediğiniz Tuşa basma, yerine anahtar kullanın. Ayrıntılar için bu yazıyı okuyun Key event differences.

Belgede basılan karakter, menü satırının içeriğine karşılık geldiğinde etkin sınıfı eklemek için bir işlev oluşturdum.

$(document).on('keyup', function(e) { 
 
    if (e.shiftKey == false && e.ctrlKey == false) { 
 
    // get the character typed 
 
    var charTyped = String.fromCharCode(e.which); 
 

 
    // remove style active from all li with no child and add this to the elements with the 
 
    // content matching the character typed 
 
    $('div ul.list li:not(:has(*))').removeClass('active').filter(function() { 
 
     return this.textContent.toUpperCase() == charTyped; 
 
    }).addClass('active'); 
 
    } 
 
});

.list { 
 
    font-family: Verdana, sans-serif; 
 
    font-size: 12px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.list li { 
 
    background: yellowgreen; 
 
    display: block; 
 
    width: 150px; 
 
    height: 30px; 
 
    margin: 2px 0; 
 
    font-size: large; 
 
} 
 
.active { 
 
    background-color: #54BAE2 !important; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<div> 
 
    <ul class ='list'> 
 
     <li>a</li> 
 
     <li>b</li> 
 
     <li>c</li> 
 
     ... 
 
     <li>z</li> 
 
    </ul> 
 
</div>