Problem Hervorhebung ausgewähltes li-Element

Question

Ich möchte die Hintergrundfarbe des ausgewählten li-Elements ändern, aber mein Code funktioniert nicht wie erwartet, es ändert die Hintergrundfarbe, aber nur für eine Sekunde, ich möchte, dass die Hintergrundfarbe geändert wird während es noch das ausgewählte Element ist, das ist mein Code

$('#campoBuscarProducto').keydown(function(e) { 

    if (e.keyCode === 40) { 

     ++contador; 

     if (contador >= resultado) { contador = 0; } 

     if (contador <= resultado - 1) { 

      $('#listaDeProductos > li').removeClass('cambiandoProducto');  
      $('#listaDeProductos > li').eq(contador).addClass('cambiandoProducto'); 
     } 
    } 

    if (e.keyCode === 38) { 

     --contador; 

     if (contador < 0) { contador = resultado - 1; } 

     if (contador >= 0) { 

      $('#listaDeProductos > li').removeClass('cambiandoProducto');  
      $('#listaDeProductos > li').eq(contador).addClass('cambiandoProducto'); 
     } 
    } 
}); //Missing close parenthesis :-) 

Klasse Dies ist mein CSS ist:

.cambiandoProducto { 

    background-color: red; 
} 

haben Sie eine Vorstellung davon haben, was ich bin fehlt oder was mit der Ausgabe ist mein Code? vielleicht etwas im Zusammenhang mit der keydown Veranstaltung ?, danke.

Die ul Liste wird nach success Funktion mit diesem Code erzeugt

$.each(datos, function(i) { 

    opciones += '<li class="sugerencias">' + datos[i].nombre + '</li>'; 
}); 

resultado = datos.length; 

$('#coincidenciasBusqueda').show(); 
$('#coincidenciasBusqueda').html('<ul id="listaDeProductos">'+ opciones +'</ul>'); 

Answer 1

ich das Problem gelöst, das Problem war, dass ich mit keydown Hörer um den Code auszuführen zu ändern die Hintergrundfarbe des ausgewählten li Elements, aber bevor ich meinen Ajax-Anruf ausführen wollte, benutzte ich keyup Event Listener, der se Listener wurden mit dem gleichen input aber in verschiedenen Funktionen verbunden, so dass dies das Problem erzeugte.

I gelöst dies den keyup Ereignis-Listener mit keypress verändert und es funktioniert sehr gut jetzt, danke alle Jungs für Ihre Hilfe.

Es war mein Fehler und ich entschuldige mich, um nicht besser zu erklären, wie ich meinen Ajax-Anruf ausgeführt habe.

Answer 2

var contador = $('ul li').length, resultado = 1; 
 
$('li').eq(resultado - 1).addClass('color'); 
 
$('ul').keydown(function(e) { 
 
    if (e.keyCode == 40) { 
 
    resultado++; 
 
    if (resultado > contador) 
 
     resultado = 1; 
 
    } 
 
    if (e.keyCode == 38) { 
 
    resultado--; 
 
    if (resultado <= 0) 
 
     resultado = contador; 
 
    } 
 
    $('li').removeClass('color'); 
 
    $('li').eq(resultado - 1).addClass('color'); 
 
    //console.log('selected item: ' + resultado); 
 
    return false; 
 
});

.color { 
 
    background-color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
click on "ul" to focus 
 
<br> 
 
<ul tabindex="0" > 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
</ul>

Answer 3

Ich versuche Zeige Test zu vereinfachen:

HTML:

<input type="text" id="campoBuscarProducto" /> 
<ul id="listaDeProductos"> 
    <li class="sugerencias">asd</li> 
    <li class="sugerencias">ygjhgh</li> 
    <li class="sugerencias">ret</li> 
    <li class="sugerencias">87687</li> 
    <li class="sugerencias">-0-</li> 
</ul> 

jQuery:

var contador = 0; 
var resultado = 5; 
$('#campoBuscarProducto').keydown(function(e) { 
    console.log(e.keyCode); 
    if (e.keyCode == 40) { 
     contador++; 
     console.warn(contador); 
     if (contador > resultado) { 
      contador = 1; 
     } 
     $('#listaDeProductos > li').removeClass('cambiandoProducto');  
     $('#listaDeProductos > li').eq(contador - 1).addClass('cambiandoProducto'); 

    } 

    if (e.keyCode == 38) { 
     contador--; 
     console.warn(contador); 
     if (contador == 0) { contador = resultado; } 
     $('#listaDeProductos > li').removeClass('cambiandoProducto');  
     $('#listaDeProductos > li').eq(contador - 1).addClass('cambiandoProducto'); 
    } 
}); 

CSS:

.cambiandoProducto { 

    background-color: red; 
} 

Hier ist die fiddle