如何通过方向键控制元素对应边框的颜色切换？

你的代码逻辑是可行的，只要#sh元素本身已经设置了边框的宽度与样式（比如border: 2px solid #000），按下对应方向键时，就能正确将指定侧边的边框颜色改为#fff。jQuery的keydown事件能正常捕获方向键的按键码（38/40/37/39分别对应上下左右），通过css()方法修改行内样式的逻辑也没问题。

优化建议 #

• 缓存DOM元素，减少重复查询：每次按键都调用$("#sh")会重复查询DOM，提前缓存可以提升性能：

  $(function(){
      const $sh = $("#sh"); // 缓存元素
      $(document).keydown(function(e){
          switch(e.which){
              case 38: $sh.css("border-top-color", "#fff");
              break;
              case 40: $sh.css("border-bottom-color", "#fff");
              break;
              case 37: $sh.css("border-left-color", "#fff");
              break;
              case 39: $sh.css("border-right-color", "#fff");
              break;
          }
      }); 
  });
  

• 统一逻辑，简化代码：将按键码和对应的边框属性做映射，避免重复的switch分支：

  $(function(){
      const $sh = $("#sh");
      const keyBorderMap = {
          38: "border-top-color",
          40: "border-bottom-color",
          37: "border-left-color",
          39: "border-right-color"
      };
      $(document).keydown(function(e){
          const prop = keyBorderMap[e.which];
          if(prop){
              $sh.css(prop, "#fff");
          }
      }); 
  });
  

• 添加边框颜色重置（按需）：如果需要每次只高亮当前按下方向的边框，其他边框恢复默认颜色，可以在设置新颜色前重置所有边框：

  $(function(){
      const $sh = $("#sh");
      const keyBorderMap = {
          38: "border-top-color",
          40: "border-bottom-color",
          37: "border-left-color",
          39: "border-right-color"
      };
      const defaultBorderColor = "#000"; // 替换成你的默认边框颜色
      $(document).keydown(function(e){
          const prop = keyBorderMap[e.which];
          if(prop){
              // 重置所有边框颜色为默认
              $sh.css({
                  "border-top-color": defaultBorderColor,
                  "border-bottom-color": defaultBorderColor,
                  "border-left-color": defaultBorderColor,
                  "border-right-color": defaultBorderColor
              });
              // 设置当前方向的边框颜色
              $sh.css(prop, "#fff");
          }
      }); 
  });
  

• 使用CSS类替代行内样式：将样式定义在CSS中，通过添加/移除类来操作，符合样式与逻辑分离的原则：
  CSS部分：

  #sh {
      border: 2px solid #000; /* 默认边框样式 */
  }
  #sh.border-top-white { border-top-color: #fff; }
  #sh.border-bottom-white { border-bottom-color: #fff; }
  #sh.border-left-white { border-left-color: #fff; }
  #sh.border-right-white { border-right-color: #fff; }
  

  JavaScript部分：

  $(function(){
      const $sh = $("#sh");
      const keyClassMap = {
          38: "border-top-white",
          40: "border-bottom-white",
          37: "border-left-white",
          39: "border-right-white"
      };
      $(document).keydown(function(e){
          const className = keyClassMap[e.which];
          if(className){
              // 移除所有高亮类，再添加当前类（如果需要单一高亮）
              $sh.removeClass("border-top-white border-bottom-white border-left-white border-right-white");
              $sh.addClass(className);
          }
      }); 
  });
  

• 使用更具可读性的按键判断：现代浏览器支持e.key直接判断按键名称，比数字按键码更直观：

  $(function(){
      const $sh = $("#sh");
      const keyBorderMap = {
          "ArrowUp": "border-top-color",
          "ArrowDown": "border-bottom-color",
          "ArrowLeft": "border-left-color",
          "ArrowRight": "border-right-color"
      };
      $(document).keydown(function(e){
          const prop = keyBorderMap[e.key];
          if(prop){
              $sh.css(prop, "#fff");
          }
      }); 
  });
  

内容的提问来源于stack exchange，提问作者Sub-Zero