javascript - 如何使用下一个/上一个链接循环浏览多个 Bootstrap3 模式

Question

我正在尝试通过当前打开模式中的下一个和上一个链接循环浏览多个 Bootstrap3 模式。如果您单击“下一个”，我的脚本确实会转到下一个模式，如果您单击“上一个”，则会返回到上一个模式，但我不能再使用 data-dismiss="modal"功能来隐藏模式。另外，我的 JQuery 看起来相当老套。有没有更好的办法？欢迎任何帮助。

<button class="text-link" data-toggle="modal" data-target="#modalOne">Modal One</button>
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalOne">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>
            <a class="next"></a>
            <a class="prev"></a>
            <div class="modal-body">
            Hello Earth
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<button class="text-link" data-toggle="modal" data-target="#modalTwo">Modal Two</button>
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalTwo">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>
            <a class="next"></a>
            <a class="prev"></a>
            <div class="modal-body">
            Hello Mars
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


$(document).ready(function() {
    $('a.next').on('click', function() {
        $(this).closest('.modal').css("display", "none");
        $(this).closest('.modal').removeClass('in').next().addClass('in').css("display", "block");
    });
    $('a.prev').on('click', function() {
        $(this).closest('.modal').css("display", "none");
        $(this).closest('.modal').removeClass('in').prev().addClass('in').css("display", "block");
    });
});

Answer 1

您可以尝试使用modal的内置显示隐藏功能，例如:

$(document).ready(function() {
    $('a.next').on('click', function() {
        let dialog = $(this).closest('.modal');
        dialog.modal('hide');
        dialog.next().modal('show');
    });
    $('a.prev').on('click', function() {
        let dialog = $(this).closest('.modal');
        dialog.modal('hide');
        dialog.prev().modal('show');
    });
});