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

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 ant 打开 job2，然后在左箭头上单击返回到 job1。有可能吗，我怎么做？

语法错误。

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

Answer 2

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

Keyup 事件（向下滚动查看事件。哪个例子）：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);