Jquery keydown 事件导航图片滑块

Question

您好，我想在我的 CSS 滑块中添加键盘导航。滑块代码如下。

html

    <div class="imgdisplay">
      <ul>

        <li>
          <input type="radio" id="img1" name="slide" checked>
          <label for="img1"></label>
          <img src="work/legibile/render1.jpg">
        </li>

        <li>
          <input type="radio" id="img2" name="slide">
          <label for="img2"></label>
          <img src="work/legibile/render2.jpg">
        </li>

        <li>
          <input type="radio" id="img3" name="slide">
          <label for="img3"></label>
          <img src="work/legibile/render3.jpg">
        </li>
      </div>

css .imgdisplay 输入{ 显示：无 }

.imgdisplay label{
 position: absolute;
 background-color: #BDBDBD;
 width:0.25em;
 height: 0.25em;
 border-radius: 100%;
 border: #BDBDBD 2.5px solid;
 top:-1.5em;
 cursor: pointer;
 margin: auto;
 z-index: 10
 }

.imgdisplay li:nth-child(1) label {
  left: 0em;
 }

.imgdisplay li:nth-child(2) label {
 left: 1.5em;
 }

.imgdisplay li:nth-child(3) label {
 left: 3em;
 }
.imgdisplay img {
 opacity: 0;
 visibility: hidden;
 }
 .imgdisplay li input:checked ~ img {
  opacity: 1;
  visibility: visible;
  z-index: 10;
 }

我想通过左右箭头键来导航滑块。基本思路是代码首先检测到检查的ID“img#”。当用户按下右箭头键时，将检查 ID 为“img #+1”。当用户按下左箭头键时，将检查 ID 为“img #-1”。

我的问题是： 1.如何让代码检测到第一个的ID。 2. 我尝试了下面的jquery代码只是为了熟悉keydown事件但是页面的内容消失了，我不知道为什么。

  $(document).keydown(function(e) {
if(e.keyCode == 37) { // left
  $("#img1").attr({"checked" });
  }
else if(e.keyCode == 39) { // right
  $("").attr({});
  }
});

Answer 1

这样改变radio输入的id

img_1、img_2、img_3

并在准备好的文档上执行以下代码。

$(document).keydown(function(e) {
    var checkedElmIdx =  parseInt($("[type='radio']:checked").attr("id").split("_")[1]);
   if(e.keyCode == 37) { // left
       $("#img_"+(checkedElmIdx-1)).prop("checked", true);
   } else if(e.keyCode == 39) { // right
        $("#img_"+(checkedElmIdx+1)).prop("checked", true);
   }
});