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

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