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

Open next modal on keyboard arrow buttons click

本文关键字：单击 下一个 模式 按钮 键盘      更新时间：2023-09-26

我用jQuery创建了一个模态系统。

//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：

<!-- Open modal -->
<div class="job">
    <div class="job_inside" data-id="job1"></div>
</div>
<!-- Modal -->
<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>

我想说的是，如果打开了模态 id job1，在右箭头键上单击它关闭了 job1 ant打开 job2，在左箭头上单击返回作业 1。这可能吗，我怎么能做到？

对不起语法。

你可以这样做：

.HTML：

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

.JS：

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);
    }
});
这是

您要部署的基本策略（实时预览 http://codepen.io/larryjoelane/pen/YwJMPG?editors=1010）。如果您使用已经通过 JQuery 的 eq 函数提供的类名和一个索引变量，您真的不需要担心具有正确 id 的元素的淡入和淡出，当您按下左右箭头时必须递增该索引变量。 您需要使用 keyup 事件上的 what 属性来捕获箭头的键码。以下是一些指向 API 的链接，如果您想了解有关它们的更多信息。

键入事件（向下滚动以查看事件。哪个示例）： http://api.jquery.com/keyup/

.HTML：

    <!-- 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>

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);
相关文章：