Javascript 打开键盘上的下一个模式箭头按钮单击

我用jQuery创建了一个modals系统

//Open modal
$('.job_inside').on('click', function(){
    var id = $(this).data('id');
    $('#'+id).fadeIn(300);
});

//Close modal
$(".close_btn").click(function() {
    $(".job_full").fadeOut(300);
});

html:

&时代；
桑费罗·迪扎纳斯

我想做的是，若模式id job1被打开，在右箭头键上单击它关闭job1，打开job2，在左箭头键上单击返回job1。有可能吗？我怎样才能做到

---

抱歉，语法错误。

这是您要部署的基本策略（实时预览）。如果使用JQuery的eq函数提供的类名和一个索引变量，则不必担心右id元素的淡入淡出，当按下左箭头和右箭头时，索引变量必须递增。您需要在keyup事件上使用which属性来捕获箭头的keycode。这里有一些API的链接，如果你想了解更多

Keyup事件（向下滚动查看事件。哪个示例）：

HTML:

单击以加载
&时代；
桑费罗·迪扎纳斯
&时代；
美国
&时代；
加拿大

JavaScript/JQuery：

(function($) {

  //store the index of the job
  var index = 0;

  //Open modal
  $('.job_inside').on('click', function() {

    $("#job1").fadeIn(300);

  });

  $(document).on("keyup", function(e) {

    console.log(e.which);

    switch (e.which) {

      //left arrow
      case 37:

        console.log("left arrow");

        //if the index is not 0
        if (index !== 0) {

          //decrement it
          index--;

        }

        //close the next job
        $(".job_full").eq(index + 1).fadeOut(200);

        //load the previous job
        $(".job_full").eq(index).fadeIn(300);

        break;

        //right arrow
      case 39:

        console.log("right arrow");


        //if the index incremented by 1 is less than the length of
        //collection
        if ((index + 1) < $(".job_full").length) {

        //increment the index
        index++;          

        }

          //close the previous job
          $(".job_full").eq(index - 1).fadeOut(200);

          //load the next job
          $(".job_full").eq(index).fadeIn(300);



        break;

    }

  });

  //Close modal
  $(".close_btn").click(function() {
    $(".job_full").fadeOut(300);
  });

})(jQuery);

（函数（$）{
//存储作业的索引
var指数=0；
//开放模态
$（'.job_inside'）。在（'click'，function（）上{
$（“#工作1”）。法代因（300）；
});
$（文件）。关于（“键控”，功能（e）{
console.log（e.which）；
开关（e.which）{
//左箭头
案例37：
控制台日志（“左箭头”）；
//如果索引不是0
如果（索引！==0）{
//减量
索引--；
}
//关闭下一个作业
$（“.job_full”）.eq（指数+1）.淡出（200）；
//加载上一个作业
$（“.job_full”）.eq（index）.fadeIn（300）；
打破
//右箭头
案例39：
console.log（“右箭头”）；
//如果增加1的索引小于
//收藏
如果（（索引+1）<$（“.job_full”）.长度）{
//增加索引
索引++；
}
//关闭上一个作业
$（“.job_full”）.eq（指数-1）.fadeOut（200）；
//加载下一个作业
$（“.job_full”）.eq（index）.fadeIn（300）；
打破
}
});
//闭合模态
$（“.close_btn”）。单击（函数（）{
美元（“.job_full”）。淡出（300）；
});
})（jQuery）；

您可以这样做：

HTML:

打开//注意将此处的数据id=“job1”更改为“1”
&时代；
弗斯特
&时代；
第二
&时代；
第三

JS:

var currentId=null；
$（“.job_inside”）。在（“单击”，函数（）{
var id=$（this.data（“id”）；
currentId=id；
$（“#job”+id）.fadeIn（300）；//这里有零钱
});
$（文件）。关于（“键控”，功能（e）{
如果（例如，==37&¤tId>1）{
当前ID--；
美元（“.job_full”）。淡出（300）；
$（“#作业”+当前ID）.fadeIn（300）；
}else if（例如which===39&¤tId<3）{
currentId++；
美元（“.job_full”）。淡出（300）；
$（“#作业”+当前ID）.fadeIn（300）；
}
});

你能发布你的html来帮助加快速度吗？请不要发帖。您应该编辑原始问题，而不是删除它，然后再问一个新的相同问题。@nenapp但我不知道如何获取当前打开的ID和打开其他。@Teemu很抱歉，这种情况不会再次发生。如果有两个以上的模态，它将转到最后和第一个。谢谢你的反馈，我正在用一个工作版本更新我的答案。嗯，你能让淡出元素从屏幕移到左边，淡入-从右边移到屏幕吗。就像一个简单的滑块。我会看看我是否能解决一些类似的问题。

    <!-- Open modal -->
<div class="job">
  <div class="job_inside" data-id="job1">Click to load</div>
</div>

<!-- Modal 1-->
<div class="job_full" id="job1" style="display: none;">
  <div class="job_full_inside">
    <div class="close_btn">&times;</div>
    <img src="resursai/img/sanfierro.jpg" alt="" />
    <h2>SanFierro dizainas</h2>
  </div>
</div>

<!--Modal 2-->
<div class="job_full" id="job2" style="display: none;">
  <div class="job_full_inside">
    <div class="close_btn">&times;</div>
    <img src="resursai/img/sanfierro.jpg" alt="" />
    <h2>United States</h2>
  </div>
</div>

   <!--Modal 3-->
<div class="job_full" id="job3" style="display: none;">
  <div class="job_full_inside">
    <div class="close_btn">&times;</div>
    <img src="resursai/img/sanfierro.jpg" alt="" />
    <h2>Canada</h2>
  </div>
</div>

(function($) {

  //store the index of the job
  var index = 0;

  //Open modal
  $('.job_inside').on('click', function() {

    $("#job1").fadeIn(300);

  });

  $(document).on("keyup", function(e) {

    console.log(e.which);

    switch (e.which) {

      //left arrow
      case 37:

        console.log("left arrow");

        //if the index is not 0
        if (index !== 0) {

          //decrement it
          index--;

        }

        //close the next job
        $(".job_full").eq(index + 1).fadeOut(200);

        //load the previous job
        $(".job_full").eq(index).fadeIn(300);

        break;

        //right arrow
      case 39:

        console.log("right arrow");


        //if the index incremented by 1 is less than the length of
        //collection
        if ((index + 1) < $(".job_full").length) {

        //increment the index
        index++;          

        }

          //close the previous job
          $(".job_full").eq(index - 1).fadeOut(200);

          //load the next job
          $(".job_full").eq(index).fadeIn(300);



        break;

    }

  });

  //Close modal
  $(".close_btn").click(function() {
    $(".job_full").fadeOut(300);
  });

})(jQuery);

<div class="job">
    <div class="job_inside" data-id="1">open</div> //notice change here data-id="job1" to "1"
</div>
<!-- Modal -->
<div class="job_full" id="job1" style="display: none;">
    <div class="job_full_inside">
        <div class="close_btn">&times;</div>
        <h2>First</h2>
    </div>
</div>
<div class="job_full" id="job2" style="display: none;">
    <div class="job_full_inside">
        <div class="close_btn">&times;</div>
        <h2>Second</h2>
    </div>
</div>
<div class="job_full" id="job3" style="display: none;">
    <div class="job_full_inside">
        <div class="close_btn">&times;</div>
        <h2>Third</h2>
    </div>
</div>

var currentId = null;

$(".job_inside").on("click", function () {
    var id = $(this).data("id");
    currentId = id;
    $("#job" + id).fadeIn(300);      //small change here
});

$(document).on("keyup", function (e) {
    if (e.which === 37 && currentId > 1) {
        currentId--;
        $(".job_full").fadeOut(300);
        $("#job" + currentId).fadeIn(300);
    } else if (e.which === 39 && currentId < 3) {
        currentId++;
        $(".job_full").fadeOut(300);
        $("#job" + currentId).fadeIn(300);
    }
});