javascript - 如何使用箭头键和悬停事件将 css 应用于下拉表中的链接？

Question

我是一名初学者 Web 开发人员，我正在尝试使用向上和向下键在搜索结果下拉列表中启用选择。以前它只能使用鼠标，所以你必须用鼠标将鼠标悬停在搜索结果上，然后单击你感兴趣的链接。到目前为止，我已经能够将我的 css 类应用到表，但是一旦我释放向上或向下键，CSS 就会恢复为默认值。到目前为止，这是我的代码:

悬停样式:

.search .results a:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #2380dd #2179d5 #1a60aa;
    background-color: #338cdf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
    background-image: linear-gradient(top, #59aaf4, #338cdf);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

高亮CSS:

.highlight {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #2380dd #2179d5 #1a60aa;
    background-color: #338cdf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
    background-image: linear-gradient(top, #59aaf4, #338cdf);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

按键处理程序:

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {

    switch (e.keyCode) {
        case down:
            var links = $(".results").find("a");

            if (current_row < links.length) {
                links.eq(current_row).removeClass();
                current_row++;
            }

            //links.eq(current_row).removeClass("hover");
            links.eq(current_row).addClass("highlight");
            break;

        case up:
            var links = $(".results").find("a");

            if (current_row > 0) {
                links.eq(current_row).removeClass();
                current_row--;
            }

            //links.eq(current_row).removeClass("hover");
            links.eq(current_row).addClass("highlight");
            break;
    }
    return true;
});

我想也许悬停类干扰了我的高亮类(它不应该依赖于鼠标悬停事件)所以我尝试删除它。但是，这不起作用。突出显示出现，但一旦我释放向上/向下键它就会消失。为什么会发生这种情况？

Answer 1

我已尝试将您的代码减少到最低限度，在我看来，JavaScript 工作正常(除了 current_row < links.length 应该是 current_row < links.length - 1 )。

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {
  switch (e.keyCode) {
    case down:
      var links = $(".results").find("a");

      if (current_row < links.length - 1)
      {
        links.eq(current_row).removeClass();
        current_row++;
      }

      links.eq(current_row).addClass("highlight");
      break;
    case up:
      var links = $(".results").find("a");

      if (current_row > 0)
      {
        links.eq(current_row).removeClass();
        current_row--;
      }

      links.eq(current_row).addClass("highlight");
      break;
  }
  return true;
});

.search .results a:hover {
  color: red;
}

.highlight {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="search">
  <input type="text" id="sinput" />
  <ul class="results">
    <li><a>Foo</a></li>
    <li><a>Bar</a></li>
    <li><a>Baz</a></li>
  </ul>
</div>

原始理论:可能导致问题的是 .highlight是一个相对较短的选择器，在 CSS 中，具有最长选择器的规则优先。

如果你有一个规则.search .results a它设置结果项的默认样式，它覆盖 .highlight 中的属性.
因此，下面的示例不起作用。

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {
  switch (e.keyCode) {
    case down:
      var links = $(".results").find("a");

      if (current_row < links.length - 1)
      {
        links.eq(current_row).removeClass();
        current_row++;
      }

      links.eq(current_row).addClass("highlight");
      break;
    case up:
      var links = $(".results").find("a");

      if (current_row > 0)
      {
        links.eq(current_row).removeClass();
        current_row--;
      }

      links.eq(current_row).addClass("highlight");
      break;
  }
  return true;
});

.search .results a {
  color: gray;
}

.search .results a:hover {
  color: red;
}

.highlight {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="search">
  <input type="text" id="sinput" />
  <ul class="results">
    <li><a>Foo</a></li>
    <li><a>Bar</a></li>
    <li><a>Baz</a></li>
  </ul>
</div>

如果是这种情况，您只需在 .highlight 的声明中更加具体解决问题:

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {
  switch (e.keyCode) {
    case down:
      var links = $(".results").find("a");

      if (current_row < links.length - 1)
      {
        links.eq(current_row).removeClass();
        current_row++;
      }

      links.eq(current_row).addClass("highlight");
      break;
    case up:
      var links = $(".results").find("a");

      if (current_row > 0)
      {
        links.eq(current_row).removeClass();
        current_row--;
      }

      links.eq(current_row).addClass("highlight");
      break;
  }
  return true;
});

.search .results a {
  color: gray;
}

.search .results a:hover {
  color: red;
}

.search .results a.highlight {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="search">
  <input type="text" id="sinput" />
  <ul class="results">
    <li><a>Foo</a></li>
    <li><a>Bar</a></li>
    <li><a>Baz</a></li>
  </ul>
</div>

实际解决方案: A keyup生成搜索结果的监听器可能会导致问题:当向上/向下键被释放时，结果将重新生成并覆盖现有结果(因此是 highlight 类)。您可以尝试从 keyup 返回处理程序如果e.keyCode是up或 down或收听 input而不是事件(仅当输入实际更改时才会触发):$("#sinput").on("input", function(e) { ... })