Question

我想更改所选li元素的背景颜色，但我的代码没有按预期工作，它会改变背景颜色，但仅仅一秒钟，我希望它保持背景颜色变化，而它仍然是选中的元素，这是我的代码

 $('#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 :-)

这是我的CSS课程：

.cambiandoProducto {

    background-color: red;
}

您对我错过的内容或代码的问题有所了解吗？也许是与keydown事件相关的事情，谢谢。

ul列表是在使用此代码的success函数之后生成的

$.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

我解决了这个问题，问题是我使用keydown侦听器运行代码来更改所选li元素的背景颜色但是在运行我的ajax调用之前我正在使用{ {1}}事件监听器，这些监听器与相同的keyup关联，但在不同的功能中，因此产生了问题。

我已解决这会将input事件监听器更改为keyup并且它现在运行良好，感谢所有人的帮助。

这是我的错误，我道歉没有更好地解释我是如何运行我的ajax电话。

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

我尝试简化索引测试：

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

以下是fiddle

突出显示选定的li元素的问题

3 个答案: