在按下键盘箭头按钮时打开下一个模态窗口。

Question

我使用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并打开job2，按左箭头键返回job1。是否可能，我该如何实现？

对于语法不好的抱歉。

- PovilasC

---

你能否发布你的HTML代码以帮助加快进度？ - Larry Lane

请问如何使用jQuery捕获箭头按键的按下事件？ - NenadP

请不要发布重复问题。您应该编辑原始问题，而不是删除它并提出一个新的相同问题。 - Teemu

@NenadP 但我不知道如何获取当前打开的ID并打开其他ID。 - PovilasC

@Teemu 对不起，这种情况不会再发生了。 - PovilasC

在点击事件之外声明id变量，只在函数内部进行赋值，而不是声明。（但要注意不要将它们作为全局变量 - 将所有内容包装在立即函数中） - NenadP

Answer 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);
    }
});

- Nijeesh

---

嗯，你能让淡出元素从屏幕向左移动，并且淡入元素从右侧向屏幕移动吗？就像简单的滑块一样。 - PovilasC

我会看看是否可以设计出类似的功能。 - Larry Lane

Answer 2

这是您想要部署的基本策略（实时预览http://codepen.io/larryjoelane/pen/YwJMPG?editors=1010）。如果您使用已经提供的类名和JQuery的eq函数以及一个索引变量来逐渐增加左右箭头时，您真的不需要担心淡入淡出具有正确id的元素。您将想要在keyup事件上使用which属性来捕获箭头的keycode。以下是一些API链接，如果想要了解更多信息。

Keyup事件（向下滚动以查看event.which示例）：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);

- Larry Lane

---

如果有超过2个模态框，它会跳转到最后一个和第一个。在CodePen上的演示 - PovilasC

感谢您的反馈，我正在更新我的答案，并提供一个可工作的版本。 - Larry Lane