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 Event（向下滚动以查看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);

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

2 个答案: